在 AMP 中包含自定义 JavaScript 的最佳方式

Question

我阅读了有关脚本标记的所有文档，但找不到如何在 AMP HTML 中包含自定义 JavaScript。

我知道<script> 标签是被禁止的，除非它的类型是application/ld+json。

有默认的 AMP HTML 运行时组件和扩展组件，它们包含不同组件的特定表单，但我找不到自定义 JavaScript 的特定表单。

这是我想在 AMP HTML 中包含的脚本标签；

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

Answer 1

AMP 的全部意义在于只允许一部分网络技术阻止您的网页变慢。

Javascript 通常是导致网站速度变慢的原因，因此 AMP 页面不允许使用它们（AMP 脚本本身除外），尽管他们试图用专门编写的 amp 组件来填补这一空白慢。

因此，如果您想使用 Javascript，您有多种选择：

1. 不要使用 AMP。没有人强迫你这样做。
2. 从您的 amp 文档中删除脚本标签，并在没有该功能的情况下继续使用。
3. 找到一个与您的 JavaScript 功能相同的 amp-component 并改用它。不知道什么是legaltext.js，我猜它的名称会显示一些法律文本，例如cookie 通知，所以amp-user-notification 小部件可能会起作用？
4. 在amp iframe 中使用您的Javascript。这些在 amp 页面中是允许的，但可能会以较低的优先级加载，以确保它们不会减慢主页速度。

Answer 2

<script> 标记通常不允许在 AMP 中使用。有一些外部 javascript 文件，作为 AMP 项目的一部分构建，在某些情况下是允许的，甚至是必需的。除此之外，不允许使用 javascript。 AMP 无法使用自定义脚本标记。

Answer 3

要在 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>

可以使用 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>

Answer 4

现在不需要使用amp-iframe，因为 AMP 原生支持 official document 中提到的 javascript

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>

Here is official amp-script specs

Answer 5

好的，我遇到了同样的问题，对我来说最好的方法是使用 iframe，它会异步渲染。这确实意味着，您可以像这样解决它：

服务器端 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>

将 AMP 框架库添加到您的应用中：

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

现在，您可以在体内使用：

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

在您的服务器上创建 api 时要小心。 AMP 框架需要 https 通信 - 这确实意味着：https://localhost/api/frames/my-js-script-app

现在，amp 将异步渲染您的应用，每个人都很高兴 :-))

希望对你有帮助！

Answer 6

AMP 允许在开发和生产模式下使用自定义 JavaScript，而无需 (iframe) 破解。

要在您的 AMP 页面中包含自定义 JavaScript，请使用 <amp-script> 组件。

下面是一个说明如何使用<amp-script>组件的sn-p；

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

请注意，对自定义 JavaScript 的引用可以是相对路径或完整路径。

请注意，AMP 对任何给定页面上的所有 <amp-script> 组件强制执行 150 KB 的自定义 JavaScript 限制。

为所有 <amp-script> 组件使用 150 KB 的自定义 JavaScript 的原因是为了控制性能。