Running JavaScript in AMP

I am a bit confused as to how JavaScript is suppposed to be run in an AMP page.

I got as far as understanding that my JavaScript must be executed in an iframe. Such iframe has to be placed down in the page (75% at least from top) and has to be served through https. This does indeed work:

<amp-iframe 
  width=300 
  height=300 
  sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox" 
  layout="responsive"
  frameborder="0" 
  src="https://localhost:8000/?p=myjs">
</amp-iframe>

In that page (https://localhost:8000/?p=myjs) I can freely run my js.

My problem is the following though:

How am I supposed to run my code against the document of the main page including the iframe?

I tried accessing window.parent.document and that is blocked. (of course).

Can anyone explain how AMP people think we can actually port pages to AMP if all our js gets killed? What is the recommended pattern to have our js run on an AMP page? Is there any such thing or is it just assumed that developers must dump all their code?

Thanks

How am I supposed to run my code against the document of the main page including the iframe?

You aren't.

Can anyone explain how AMP people think we can actually port pages to AMP if all our js gets killed?

The idea is that you write lightweight pages that don't depend on JavaScript.

From the spec:

AMP HTML is a subset of HTML for authoring content pages such as news articles in a way that guarantees certain baseline performance characteristics.

"Content pages such as news articles" don't need JavaScript. If you aren't writing that sort of page then maybe AMP HTML isn't a good choice of language and you should stick to HTML 5.

As the other commenter says, one of the basic pillars of AMP is that you can't run your own JavaScript. The idea is to make webpages faster, simpler, and more reliable.

You can indeed run JS in an iframe, but that JS's interaction with the main page will be highly limited.

So using a framework like vue.js goes contrary to the point of AMP.

On the other hand, AMP comes with all sorts of built-in stuff that obviates the need for most JS. It's a web components library. And a fair amount of dynamic interaction and server communication is possible via and .

At the AMP Conf 2018 the support for custom JS in AMP using web workers was introduced. It should be ready later this year.

As of 11th of April 2019 Official Announcement,

Now you can include custom JavaScript in AMP pages

AMP pages support custom JavaScript through the <amp-script> component.

Try out amp-script example

<!doctype html>
<html ⚡>
<head>
  ...
  <script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
<body>  
  ...
  <amp-script layout="container" src="https://example.com/myfile.js">
    <p>Initial content that can be modified from JavaScript</p>
  </amp-script>
  ...
</body>
</html>

Running JavaScript in AMP

Related

Recent Posts