Question

我已经阅读了有关脚本标记的所有文档，但我找不到如何在AMP HTML页面中编写脚本标记，尽管我知道“脚本标记是禁止的，除非类型是application/ld+json”。它们有一些默认的AMP运行时组件和扩展组件，它们包含不同组件的特定形式。

我无法在AMP HTML中找到自定义js的具体表单。这是我的脚本标签：

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

Answer 1

AMP的重点是只允许一部分网络技术阻止你的网页变慢。

Javascript通常是导致网站速度缓慢的原因，因此AMP页面不允许这些内容（AMP脚本本身除外），尽管他们已经尝试填补这一空白，这是专门写入的放大器组件不要慢。

因此，如果你想使用Javascript，你有几个选择：

不要使用AMP。没有人强迫你这么做。
从放大器文档中删除脚本标记，并在没有该功能的情况下直播。
找一个与JavaScript相同的放大器组件，然后使用它。我不知道legaltext.js是什么，我猜它会显示一些法律文本，比如cookie通知，所以也许amp-user-notification小部件会起作用吗？
在amp iframe中使用您的Javascript。这些在放大器页面中是允许的，但可以假定它们的优先级较低，以确保它们不会减慢主页面的速度。

Answer 2

AMP中通常不允许使用

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

Answer 3

要在AMP页面中使用自定义Javascript，您应该在Javascript文件中编写它（例如： amp-iframe-0.1.js ）。然后将此脚本添加到<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>：<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>

可以使用amp-iframe调用自定义javascript。例如：

CocoaPods

Answer 4

好的，我有同样的问题，对我来说最好的方法是使用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

现在，放大器将异步呈现您的应用，每个人都很高兴： - ））

希望它有所帮助！

Answer 5

由于AMP原生支持official document

中提到的javascript，现在无需使用amp-iframe

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>

Answer 6

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限制。

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

Google AMP编写JS脚本标记的最佳方式

6 个答案: