Develop Reference

Google AMP html - insert amp-iframe without src attribute

I'm trying to run a script inside an AMP page.
There is no page I need to load within the src attribute; my script should inject an <iframe> with the correct src (it is unknown at first load, only received in response to a request made by my script).
Is this possible in AMP?
Disclaimer: I'm open to different approaches to accomplish the same result - injecting an <iframe> with an src attribute within an AMP page.
Thank you

The AMP page cannot contain any javascript in the first place, so this won't work: https://www.ampproject.org/docs/reference/spec.html#html-tags

The only way to achieve your goal is to:
create an iframe with a src attribute pointing to an HTML page you control
in that page load the Javascript that does the work. You can see a similar approach in this example: https://ampbyexample.com/advanced/how_to_create_interactive_amp_pages/

As stated by #ade you can pull this off. Think about it like this.....
You'll have an HTTPS resource that you can hit that will return the blank iframe along with all of the JS code you need to populate the iframe. So basically an entirely functioning page that will be returned to the AMP-IFRAME.
Calling this from the src attribute of an AMP-IFRAME tag will then pull in your page that includes a blank iframe and all of the scripting needed to populate it or manipulate it. So all of your custom code is happening within the AMP-IFRAME tag but all of it's resources live within the embedded iframe tag that the AMP-IFRAME tag pulls in and renders.
We have a custom video player that works very similar to what you are talking about. I created a template that can be hit via HTTPS that returns a page that iframes our video as well as includes all the scripts to play it and manipulate it. It's all contained in a nice neat little package and the only thing required to use the AMP-IFRAME is the script that extends it. Check out all the AMP-FRAME documentation here.
Hope this helps.

jquery how do i collect the content of an iframe each time the iframe changes state?

I am working on a project which i will like to collect the content of an hidden iframe and make it the html of a div each time the iframe changes state while loading so it will act like the page is redirected and downloading its contents, but the heading and footing of the page will not refresh as well.
A good example is how facebook keep their heading and footing fixed while redirected.
i have achieved collecting the iframe content to the div using onload, but the problem is that, the content will not fully download from the iframe before collected i.e images, .css files and .js files.
Here is a code i tried:
THE SCRIPT USED TO COLLECT THE CONTENT WHEN LOADED
<script type="text/javascript">
function frame_loaded(){
var content=$('#iframe_id').contents().find('#body');
$('#my_div').html(content);
}
</script>
AND THE FRAME
<iframe id="iframe_id" src="some_url.php" style="display: hidden;" onload="frame_loaded()"></iframe>
AND THE DIV
So i used setTimeout() to slow time for 1 second so the frame will load the content and execute it's scripts fully before collecting it.
Here is the code:
setTimeout(function(){
$('#my_div').html(content);
},1000);
At times the content still won't complete downloading it's content from the iframe before collected.
I don't have any idea how to listen to the iframe if it's fully loaded or listen to it's ready state.
If any one can tell me the best way to do this, it will be very appreciative because i am very new to this.

I would suggest using portholejs which will help you interact with the iframe(domain xyz.com) and you can pass messages in between the iframe(domain xyz.com ) and the page which holds it (domain abc.com).For example in your case when the iframe loads you can pass a boolean (from xyx.com )to your page(abc.com) which holds the iframe and then download the content there is working example of how it porthole works here.
Hope it helps.

kind of "stupid" but try this (i don't have your code so it's a bit "hard" for me
$(document).on('load','#iframe_id',function(){
var content = $(this).content().find('#body');
$('my_div').html(content);
})

cURL returns full HTML via AJAX - how to display to user?

I am building a Wordpress plugin to display a list of jobs to a user pulled from a recruiting platform API. On click of a job, a cURL request is sent to the API that pulls the job details as a full HTML page (the online job advertisement). I have everything working fine in terms of pulling the HTML, but I cannot figure out how to display it to the user.
How can I either:
Open a new tab to display the HTML pulled from the AJAX request
or
Open the full HTML within a div on the same page (i.e. a modal)
I would prefer to open the HTML in a new page, but don't know how to use jQuery to do this... Opening within the page in a modal is also fine, but as far as I understand iFrames (which I would rather not use anyway), you have to pass a url (and I simply have the full markup). Is there a way to display this within a page, perhaps using canvas? It carries its own links to CSS and Javascript that need to apply only within that sub-page.
EDIT:
As a clarification, I know that I can simply place the HTML within the page. My issue is that it is a full page. This means it has a <head> <body>, and its own CSS links. Just putting it in the page messes with the rest of the CSS and produces invalid HTML.
This is what I already have:
$.post(ajaxurl, data, function(response) {
$('.sg-jobad-full').html(response);
});
It places the response within the page perfectly well... but it messes up the page by introducing a <body> within a <body> and competing CSS.

If you put the response in a <div>, it will mess the markup because css/js/meta definitions may not be put into the <body>.
If there is a way to retrieve the data without the markup already beeing in, you could parse the data and let it print via a javascript, which is the method I'd prefere.
According to your comment, you should really go with iframes, all other methods will alter your markup to have <html> tags inside <html>, which is very bad practice.
Iframes can be styled just like a <div> element, and it is realy not dirty to use iframes for the purpose you mentioned (it does not load from a foreign host, it is not hidden, it does not track).
<iframe class="job-offers-plugin" src=".../wp-content/plugins/yourplugin/getJobs.php">
</iframe>
Put some style into it like width;height;padding;margin;overflow; place it where you like..
This helps you with the databse:
Using WPDB in standalone script?
Add permalinks to your plugin script:
http://teachingyou.net/wordpress/wordpress-how-to-create-custom-permalinks-to-use-in-your-plugins-the-easy-way/

If you get the full HTML in an jQuery.ajax(...) call, you can always just show it in a certain div on your page.
$.ajax({
success: function (resp){
// resp should be your html code
$("#div").html(resp);
}
});
You can use the $(selector).html(htmlCode) everywhere you want. You can insert it into modals, divs, new pages...
If you have to inject a whole HTML page you can:
strip the tags you don't need
or
use an iframe and write the content to that iframe: How to set HTML content into an iframe
iframes aren't my favourite thing... but it's a possibility

Can you select tags from another page?

If I have this page a.html that has all the jquery codes. And there is another page b.html that has only html tags. Is it possible to do something like:
alert( $('a').fromhref('b.html').html() );
Basically I want to select a tag from another page. I want to basically avoid the use of iframes and httprequests.

You can access parts of another page with jQuery, provided both pages are on the same domain, using load(), but this can only be done with an http request (though if the page is cached, it might not be necessary), as a brief example:
$('#idOfElementOnPageA').load('http://example.com/pageB.html #idOFElementOnPageB');
This will load the html of the element with an id of idOfElementOnPageB into the element with the id of idOfElementOnPageA.
But please note, this in no way avoids making a call to the server, though it does allow you to retrieve elements from another page without using iframe elements in your page.
References:
load().

The filename should be script.js instead of a.html, then, use the script tag.
Basically, something like this (in b.html):
<script src="script.js"></script>
As long as script.js is in the same folder as b.html.

Loading portion of site into iframe

I have a script which loads content into a iframe using:
document.GetElementById('iframeid').src = 'site.html';
Now, the problem is that I want only a portion of the page loaded. If I could use jQuery I would specify which part by:
$('#iframeid').load(src = 'site.html .classforportion');
However if seems like jQuery .load doesn't work for iframes.
Is it possible to 'fool' the browser into grabbing the contents of a variable or a function for the first case? Or is it possible to create temporary 'html'-files only for so long that the script would load the right contents into it and pass it to an iframe (hm... seems unlikely...).
A work around solution for this specific case would be removing the first line of the loaded page. Is that possible with javascript or jQuery? Is it possible for this situation involving the iframe?
Thanks, going crazy over this thing! So, any help appreciated!

Ive never heard of a way of doing this with javascript since you cannot access files outside your own domain with javascript. You can do like this with PHP
<?php
function get_content_part($part=null, $website = null)
{
$website = file_get_contents($website);
$data = str_replace("\n", '', $website);
echo preg_match("/\<div class\=\"'.$part.'\"\>(.*)<\/div\>/",$data,$match);
return $match;
}
?>
Maybe integrate this with a javascript Ajax call and you can do it by javascript calls.
Best regards
Jonas

Now, the problem is that I want only a portion of the page loaded
Load page into the invisible container (iframe, div, etc..) or in a javascript string variable and do whatever you want to do with it. For example, load partial content into invisible div and than copy it into iframe or load the hole page into invisible iframe and then copy the part you need into another, visible one.