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.

Can't load url on same tab

I know a way to solve this but it's the wrong way and involves creating a new file and simply cheat.
Now the problem:
i have a folder with the index.html file; this file has a menu which has a <a href="reg_interlocutor.html">
in reg_interlocutor.html i use div's and in one of them i call the registration form:
this inserts the content of file form_registo_interlocutor.html into the div and sends the data inserted by the user to the file reg_interlocutor.php inside a folder called php;
in this file reg_interlocutor.php, when there is a problem with the data i use
echo "<script>alert('blablabla.'); window.location = '../index.html';</script>";
But if everything goes ok, i want to reload index.html.
The problem is that the browser reloads index.html inside the same div i was using since Step 2.
Actually, the tab url stays the same: localhost/proj/reg_interlocutor.html every step since step_2.
I already used:
header('window-target: main');
header('location:../index.html');
<script>top.window.location='../index.html';</script>
window.open("http://localhost/proj/index.html","_self");
Can anyone help me? I understand that my code is stuck on the div and that is why the index file is open inside that div.

You would probably be better off by using PHP (instead of HTML) to include an external html file instead of doing this directly in HTML. PHP can inject the external HTML file into the final output, which results in a much cleaner result than having the user's web browser fetch the other html file (creating a second request). This should also resolve the html loading into the <object> tag instead of the full page.

Where (and in what format) to store html code of a page within another html page?

I have a page that has an iframe with src=... etc
I need to build the same page but make it work off-line. One page, no multiple pages.
So I will do an http get, get the contents of the page in the iframe and try to store the html code in the main page. Then, onload, I will create an iframe on the fly and I will try to populate the iframe with the html code I stored earlier.
So, the stored html code will have <html><head> etc. The question is where to store the html code in the page (and in what format) in order to access it later?
In an <object> element?
In a <div> element?
In a JSON object or JavaScript variable?
Other idea?

in your filesystem you could also store the second html-document in the same folder and refference to it like
src="framecontent.html"

For your main page: create an offline app. If the content of the <iframe> is under your control, do the same for that page too. Your users will need to visit the online version once, after which the browser will cache the pages and serve them locally. No need to worry about storage: the browser will do it all for you.
If the <iframe> is not under your control, put it in localStorage (reference here). Your other suggestions won't persist over a page load.

How to get Flash SWF Url using javascript?

How to get SWF url form a webpage using javascript. Actually I want to retrieve all SWF from a webpage, So I wrote an Greasemonkey Script that scans OBJECT, EMBED etc tags to get the swf url. My script works fine on most of the pages, but fails on this one http://www.elkspel.nl/spelletjes/Film+And+TV+spelletjes/Eva+Mendes+Opmaken.html this page is not having any Object, Embed tag in its source and my script fails here.
Is there any way to get SWF Url from any webpage??

In this case, the object tag is embedded into the page loaded into the iFrame. To get the SWF url manually, just grab the url of the page in the iFrame and open it in a browser. Automating that might be difficult though. You would have to do the same thing via code - grab the url from the iFrame and load the page.
You could also look through the Firebug /Net/Flash/ tab and grab the URLs for any SWFs there.

Can i use javascript to prevent Loading the same script over and over?

Writing an application for a custom gallery, and all the script files are put in a resource folder inside each gallery folder-
is it possible to have a variable enabled that would prevent the page from loading its local JavaScript files but instead load from the main page's resource folder? trying to avoid having to hard-code it as well.
esentially all i really want is for my script files to be able to have a variable starting path- IE
(script src="(path)load.js" type="text/javascript")(/script)
where path is either blank "" or main main site- "http://www.site.com/resources/"
some of the files are CSS files so im not sure the class method would work well-
also- is there a way to refer to the root of a site? similar to using ../ but just to get the root html path.
More Info-----
The layout i have is that each gallery made is a separate folder- (for example, photography, painting, drawings, etc- would all be separate folders). They each would contain their own resources withing their folder. this is so i can just upload 1 gallery to a site and everything would be packaged nicely. But- if im running multiple gallery on one site- as with a portfolio site, each page is loading its own set of resources, which is probably not a great idea.
The resources are - thumbnails, images, xml( which are all specific to individual gallery) but then they also each have a couple javascript files for functions, a css file, and a few images that make the gallery maneuverable(arrows and the like).
I just want to be able to have the scripts which are loaded in the header- load from the root site resource folder if there are multiple gallerys

you can put all the code under a single class name e.g. Mydata.yourvariable
and then check ..
if (Mydata) { //your script has already been loaded }
it's similar to what jQuery does with $

Check out Javascript file dependencies - Selective load resource files & prevent duplicates Also check out this http://toscawidgets.org/documentation/ToscaWidgets/require_once.html

Perhaps you could try something like this:
in index.html (or another html file) you do:
<html>
<head>
<!-- use this if you need custom location, omit for the default one -->
<script type="text/javascript">
var GALLERY_PATH = "/gallery/";
</script>
<!-- ------------------- -->
<script type="text" src="/gallery/gallery.js"></script>
</head>
<body>
...
</body>
</html>
gallery.js:
var GALLERY_PATH = GALLERY_PATH || "http://mysite.com/default-gallery-location/";
document.write('<script type="text/javascript" src="' + GALLERY_PATH + '/js/_gallery.js"></script>')
document.write('<link rel="stylesheet" type="text/css" href="' + GALLERY_PATH + '/css/gallery.css">');
...
This way you easily include all files you need with the 1-liner and all files are loaded once. Hope it helps, of course if I understood the problem correctly ;)

If you found too much hard to handle it with javascript, you can do from server. That depends if the problem is the double call, or the Kb download resource used.
On the last case you can simply enable some cache driver to your web server, like Varnish or MemCache. Once you put a cache you have not to worry about double file loading anymore.
If you want to avoid lot of loads from the same javascript script, you can add a local counter then put 1 when it has loaded once. You will edit the initial call function to test if it's currently loaded, then avoid.
If you have lot of js files, and just wanna avoid calling the same resource twice of more, use session cookie to store the counter.