Google AMP best way to write JS script tag

I have read all documentation about script tag but I cannot find how to write script tag in AMP HTML page although I know "script tag is Prohibited unless the type is application/ld+json". They have some default AMP runtime components and extended components which contain specific form for different components.

I could not find what is specific form for custom js in AMP HTML. Here is my script tag:

<script src="https://arifkarim.com/widget/layouts/global/js/legaltext.js"></script>

The whole point of AMP is to only allow a subset of web technologies to stop your page being slow.

Javascript is often the cause of slow websites and so AMP pages do not allow them (except for the AMP scripts themselves), though they've tried to fill in the gap this leaves with amp components which are specially written to not be slow.

So if you want to use Javascript you've several choices:

Don't use AMP. Nobody is forcing this on you.
Remove the script tag from your amp document and live without that functionality.
Find an amp-component which does the same as your JavaScript and use that instead. Not having a clue what legaltext.js I would guess by the name it displays some legal text like a cookie notice so maybe the amp-user-notification widget would work instead?
Use your Javascript in an amp iframe. These are allowed in amp pages but will presumable be loaded with a lower priority to ensure they don't slow down the main page.

<script> tags are generally not allowed in AMP. There are a handful of external javascript files, built as part of the AMP project, which are allowed and even required in some cases. Other than those, javascript is not allowed. Custom script tags are not possible with AMP.

PhamThang

To use custom Javascript in AMP page, you should write it in Javascript file (e.g.: amp-iframe-0.1.js). Then add this script to <head>: <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

Custom javascript could be called by using amp-iframe. E.g.:

<amp-iframe width=300 height=300
    sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
    layout="responsive"
    frameborder="0"
    src="https://www.google.com/maps/embed/v1/place?key=AIzaSyDG9YXIhKBhqclZizcSzJ0ROiE0qgVfwzI&q=Alameda,%20CA">
</amp-iframe>

Ok, I had the same problem and the best way for me is use iframe, which amp will render asynchronously. It does mean, you can solve it for example like this:

Server side api: GET request (for example /api/frames/my-js-script-app). After call it, you will get follow code:

<html>
<head>
   <script defer src="your_js_scripts"></script>
</head>
<body>
  <!-- html code which using your javascript, if exists... --!>
</body>
</html>

Add AMP frame lib to your app:

 <head>
 ...
 <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
 </head>

Now, you can use in your body this:

<amp-iframe width=500 height=300
    sandbox="allow-scripts allow-same-origin"
    layout="responsive"
    frameborder="0"
    src="https://localhost/api/frames/my-js-script-app">
</amp-iframe>

Be careful with creating api on your server. AMP frame need https communication - it does mean something like this: https://localhost/api/frames/my-js-script-app

Now, amp will render your app asynchronously and everyone are happy :-))

Hope it helps!

Now no need to use amp-iframe because of AMP natively support javascript as mentioned in the official document

AMP pages support custom JavaScript through the <amp-script> component as like below :

<!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>

来源：https://stackoverflow.com/questions/36035733/google-amp-best-way-to-write-js-script-tag

标签

amp-html