30767

Google AMP html - insert amp-iframe without src attribute

Question:

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

Answer1:

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

Answer2:

The only way to achieve your goal is to:

<ol><li>create an iframe with a src attribute pointing to an HTML page you control</li> <li>in that page load the Javascript that does the work. You can see a similar approach in this example: <a href="https://ampbyexample.com/advanced/how_to_create_interactive_amp_pages/" rel="nofollow">https://ampbyexample.com/advanced/how_to_create_interactive_amp_pages/</a></li> </ol>

Answer3:

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 <a href="https://ampbyexample.com/components/amp-iframe/" rel="nofollow">here</a>.

Hope this helps.

Recommend

  • jaxb xsd prefix package names
  • MySQL multiple IN conditions to subquery with same table
  • text-align justify, cannot override
  • Is there any purpose for h2-h6 headings in HTML5?
  • EntLib Way to Bind “Null” Value to Parameter
  • Is it possible to get the word under the mouse cursor in a ``?
  • BeautifulSoup difference between findAll and findChildren
  • NHibernate manually control fetching
  • Why must we declare a variable name when adding a method to a struct in Golang?
  • using System.Speech.Synthesis with Windows10 universal app (XAML-C#)
  • Django model inheritance, filtering models
  • GAE: Way to get reference to an HttpSession from its ID?
  • Spring boot 2.0.0.M4 required a bean named 'entityManagerFactory' that could not be found
  • What is the purpose of TaskExecutor in spring?
  • Zurb Foundation _global.scss meta styles for js?
  • How to run “Deployd” on port 80 instead of port 5000 in webserver.
  • Read a local file using javascript
  • ImageMagick, replace semi-transparent white with opaque white
  • does jqgrid support a multiple checkbox list for editing
  • Cannot connect to cassandra from Spark
  • Optimizing database types to compact database (SQLite)
  • RectangularRangeIndicator format like triangular using dojo
  • Is possible to count alias result on mysql
  • Cross-Platform Protobuf Serialization
  • Alternatives to the OPTIONAL fallback SPARQL pattern?
  • Do I've to free mysql result after storing it?
  • QuartzCore.framework for Mono Develop
  • R: gsub and capture
  • RestKit - RKRequestDelegate does not exist
  • jqPlot EnhancedLegendRenderer plugin does not toggle series for Pie charts
  • Comma separated Values
  • How to get icons for entities from eclipse?
  • Revoking OAuth Access Token Results in 404 Not Found
  • Proper way to use connect-multiparty with express.js?
  • Benchmarking RAM performance - UWP and C#
  • Load html files in TinyMce
  • Turn off referential integrity in Derby? is it possible?
  • XCode 8, some methods disappeared ? ex: layoutAttributesClass() -> AnyClass
  • JaxB to read class hierarchy
  • How to load view controller without button in storyboard?