在 AMP 中包含自定义 JavaScript 的最佳方式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36035733/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Best way to include custom JavaScript in AMP
提问by Fazlul Karim
I read all documentation about script tag but I cannot find how to include a custom JavaScript in AMP HTML.
我阅读了有关脚本标签的所有文档，但找不到如何在 AMP HTML 中包含自定义 JavaScript。
I know the <script>tag is prohibited unless its type is application/ld+json.
我知道<script>标签是被禁止的，除非它的类型是application/ld+json.
There are default AMP HTML runtime components and extended components which contain specific form for different components, but I could not find a specific one for custom JavaScript.
有默认的 AMP HTML 运行时组件和包含不同组件的特定形式的扩展组件，但我找不到自定义 JavaScript 的特定形式。
Here is the script tag I want to include in AMP HTML;
这是我想包含在 AMP HTML 中的脚本标签；
<script src="https://arifkarim.com/widget/layouts/global/js/legaltext.js"></script>
回答by Barry Pollard
The whole point of AMP is to only allow a subset of web technologies to stop your page being slow.
AMP 的全部意义在于只允许 Web 技术的一个子集来阻止您的页面变慢。
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.
Javascript 通常是网站缓慢的原因，因此 AMP 页面不允许它们（AMP 脚本本身除外），尽管他们试图填补这留下的空白，这些 amp 组件是专门编写的，不会变慢。
So if you want to use Javascript you've several choices:
因此，如果您想使用 Javascript，您有多种选择：
- 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-notificationwidget 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.
- 不要使用 AMP。没有人强迫你这样做。
- 从您的 amp 文档中删除脚本标签，并在没有该功能的情况下继续使用。
- 找到一个与您的 JavaScript 具有相同功能的 amp 组件并使用它。不知道是什么 legaltext.js 我猜它会显示一些合法的文本，比如 cookie 通知，所以也许amp-user-notification小部件会起作用？
- 在amp iframe 中使用您的 Javascript 。这些在 amp 页面中是允许的，但可能会以较低的优先级加载，以确保它们不会减慢主页面的速度。
回答by Gregable
<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.
<script>AMP 中通常不允许使用标签。有一些外部 javascript 文件是作为 AMP 项目的一部分构建的，在某些情况下是允许的，甚至是必需的。除此之外，不允许使用javascript。AMP 无法使用自定义脚本标签。
回答by 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>
要在 AMP 页面中使用自定义 Javascript，您应该将其编写在 Javascript 文件中（例如：amp-iframe-0.1.js）。然后将此脚本添加到<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 调用自定义 javascript。例如：
<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>
回答by Petr Tomá?ek
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:
好的，我遇到了同样的问题，对我来说最好的方法是使用 iframe，它会异步渲染。这确实意味着，您可以像这样解决它：
Server side api:GET request (for example /api/frames/my-js-script-app). After call it, you will get follow code:
服务器端 api：GET 请求（例如/api/frames/my-js-script-app）。调用后，您将获得以下代码：
<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:
将 AMP 框架库添加到您的应用程序：
<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 httpscommunication - it does mean something like this: https://localhost/api/frames/my-js-script-app
在您的服务器上创建 api 时要小心。AMP 框架需要https通信 - 它的意思是这样的：https://localhost/api/frames/my-js-script-app
Now, amp will render your app asynchronously and everyone are happy :-))
现在，amp 将异步渲染您的应用程序，每个人都很高兴 :-))
Hope it helps!
希望能帮助到你！
回答by Divyesh Kanzariya
Now no need to use amp-iframebecause of AMP natively support javascript as mentioned in the official document
现在不需要使用了，amp-iframe因为AMP原生支持官方文档中提到的javascript
AMP pages support custom JavaScript through the <amp-script>component as like below :
AMP 页面通过<amp-script>组件支持自定义 JavaScript ，如下所示：
<!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>
回答by nyedidikeke
AMP allow the use of custom JavaScript in both development and production mode without necessitating a (iframe) hack.
AMP 允许在开发和生产模式下使用自定义 JavaScript，而无需 (iframe) hack。
To include a custom JavaScript in your AMP page, make use of the <amp-script>component.
要在您的 AMP 页面中包含自定义 JavaScript，请使用该<amp-script>组件。
Below, a snippet illustrating how to use the <amp-script>component;
下面是一个说明如何使用<amp-script>组件的片段；
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<!-- Important to add "amp-script" custom element reference -->
<script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
<title>AMP with custom JavaScript</title>
<link rel="canonical" href=".">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<head>
<body>
<amp-script layout="container" src="https://example.com/my-custom-javascript.js">
<p>Here, content that you may want to modify using a custom JavaScript</p>
</amp-script>
</body>
</html>
Note that the reference to your custom JavaScript can either be a relative or full path.
请注意，对自定义 JavaScript 的引用可以是相对路径，也可以是完整路径。
It is good to note that AMP enforces a limit of 150 kilobytes of custom JavaScript for all <amp-script>component on any given page.
值得注意的是，AMP<amp-script>对任何给定页面上的所有组件强制执行 150 KB 的自定义 JavaScript 限制。
The reason for the 150 kilobytes of custom JavaScript for all <amp-script>component is to keep performance in check.
为所有<amp-script>组件使用 150 KB 自定义 JavaScript 的原因是为了控制性能。
