19

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

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

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

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

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

6 回答 6

35

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 页面中是允许的，但可能会以较低的优先级加载，以确保它们不会减慢主页速度。
于 2016-03-28T18:55:49.043 回答
4

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

于 2016-03-18T20:38:30.147 回答
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>
于 2016-09-07T06:55:25.990 回答
2

现在不需要使用了，因为官方文档amp-iframe中提到的 AMP 原生支持 javascript

AMP 页面通过<amp-script>组件支持自定义 JavaScript，如下所示：

<!doctype html>
<html ⚡&gt;
<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>

这是官方amp-script规格

于 2019-07-25T17:57:15.363 回答
1

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

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

下面是一个说明如何使用该<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>

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

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

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

于 2019-11-03T09:25:01.037 回答
1

好的，我遇到了同样的问题，对我来说最好的方法是使用 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 将异步渲染您的应用程序，每个人都很高兴 :-))

希望能帮助到你！

于 2018-03-26T07:46:37.850 回答