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.

Add javascript to iframe and execute it

I'm trying to do the following. Say I have html file and it contains blank iframe within it
<iframe id="preview"></iframe>
Now I need to write a script to update content of that iframe
var preview=document.getElementById("preview");
preview.src = 'data:text/html;charset=utf-8,' + HTML_CODE_HERE;
Problem occurs when that code contains external CSS or javascript files, they just appear to not parse / execute.
How can I make iframe reload and re-run HTML parser for it's content?

Two things.
1.Why is the src of your iframe, an entire HTML page?Shouldn't you be creating an HTML page, say page1.html, and referring to that in your src?
2.You might be facing problems with external paths and CSS because the path that is given when the iframe is displayed.
3.For reloading an iframe, check this StackOverflow link.

Script Image Loading on HTTPS

I have a script tag on an HTML page that references an external script URL. The HTML page and the script run on HTTPS URLs. However, the script creates an IMG tag which references an image that is on an HTTP URL. I don't have control over the script itself (it is hosted by a third party). The problem is that the browser complains about loading HTTP content on an HTTPS page.
I tried the following:
Hiding the image using CSS display property - This still causes the image to load and the browser to complain
Changing the SRC attribute of the image using JavaScript/JQuery - this doesn't solve the problem because the script and the image load first and then my JavaScript runs
The image itself is not necessary, I can hide it or remove it. Also, if needed, I can host the image myself on HTTPS, but I still need to change the SRC attribute BEFORE the image loads.
Any suggested workarounds?

Change iframe src from inside after setting src with jquery?

I have an iframe the source of which i'm changing via various buttons using jquery. For some reason after the iframe source is set i can't seem to change the src attribute from links within it. The content will change correctly, but not the src attribute. I need the src to change so i can look for it from the main page to do stuff there.
This is the code from the main page that i'm using to set the src:
$('#section').attr('src','music.html');
And from within the frame i've tried using regular links, window.location, etc.

Setting IFrame size from within the IFrame

I've been trying a few things like the following trying to get the iframe to be reset from within the iframe but I am not sure what I am doing wrong. Ideas?
window.top.$("#ID").width(324);
window.top.$("#ID").height(369);
Has not worked.