Running JavaScript in AMP

P

6

10

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

Phosgene answered 25/10, 2016 at 10:17 Comment(1)

This question is discussed more fully here: #36036233 – Satang 6/6, 2017 at 15:38

I

14

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.

Intromission answered 25/10, 2016 at 10:24 Comment(2)

is it possible to include async on script tag and execute your js? I tried this on my local and its working. – Beeswing 17/11, 2016 at 6:18

What if each page of the site needs to adhere to a standard i.e. displaying the version of app currently deployed etc.? – Tortoise 1/6, 2021 at 3:32

B

8

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 .

Bendite answered 9/10, 2017 at 18:5 Comment(0)

W

7

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

Waive answered 14/2, 2018 at 2:17 Comment(0)

P

2

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>

Piccolo answered 23/7, 2019 at 10:38 Comment(0)

B

0

google seems to be pushing amp as the new requirement. people say it is for putting out 'news' but google does not seem to be pushing that direction. Here is what the amp project says about what amp is for:

Web page speed improves the user experience and core business metrics. AMP pages load near instantly enabling you to offer a consistently fast experience across all devices and platforms that link to AMP Pages including Google, Bing, LinkedIn and more. These performance gains often translate in improvements in the numbers that matter, such as time spent on page, return visits and CTRs.

I don't see any mention of authoring news articles. The implication is you need to adopt it but I don't buy that. It is highly restrictive and removes creativity. IMO.

Blockbuster answered 25/1, 2019 at 0:20 Comment(0)

B

0

Just ran across my old answer to this question, which is now sorely out of date.

AMP now offers <amp-script> as a way to include custom JavaScript in AMP, in a Web Worker. Check the documentation here. Or try this tutorial.

Also, if valid AMP isn't important to you, you're welcome to include all the JavaScript you want! It just won't pass validation. Recent announcements in Google Search may make valid AMP not as crucial, depending on your use case.

Bendite answered 30/7, 2020 at 18:41 Comment(0)

Recommended topics

Hot tags