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

IT技术 javascript amp-html
2021-03-10 18:07:30

我阅读了所有关于 script 标签的文档,但我找不到如何在 AMP HTML 中包含自定义 JavaScript。

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

有默认的 AMP HTML 运行时组件和包含不同组件的特定形式的扩展组件,但我找不到自定义 JavaScript 的特定形式。

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

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

AMP 的全部意义在于只允许 Web 技术的一个子集来阻止您的页面变慢。

Javascript 通常是网站缓慢的原因,因此 AMP 页面不允许它们(AMP 脚本本身除外),尽管他们试图用专门编写的 amp 组件来填补空白,这些组件是专门编写的。

因此,如果您想使用 Javascript,您有多种选择:

  1. 不要使用 AMP。没有人强迫你这样做。
  2. 从您的 amp 文档中删除脚本标签,并在没有该功能的情况下继续使用。
  3. 找到一个与您的 JavaScript 具有相同功能的 amp 组件并使用它。不知道是什么 legaltext.js 我猜它会显示一些合法的文本,比如 cookie 通知,所以也许amp-user-notification小部件会起作用?
  4. amp iframe 中使用您的 Javascript 这些在 amp 页面中是允许的,但可能会以较低的优先级加载,以确保它们不会减慢主页面的速度。
@nomad 我不敢相信你认为人们使用 AMP 主要是为了 SEO 的好处,而不是因为它是世界上最好的框架。(“我很震惊 - 震惊地发现这里正在进行赌博!”,“您的奖金,先生”)。暗示这一点,就是暗示谷歌正在滥用其在市场上的主导地位。当然,如果它们不包括 SEO 的好处,那么 AMP 将同样成功,甚至更多,基于其自身的优点?;-)
2021-04-18 18:07:30
对于 #1 - 不要使用 AMP - 我想您仍然可以使用 AMP 并仍然获得大部分速度优势,但您不会将其声明或验证为 AMP。(在这种情况下,您可以将 AMP 视为一组用于实现快速网站的最佳实践和代码示例。)
2021-04-19 18:07:30
@Tom 使用 AMP 的全部意义在于让 Google 缓存您的页面。如果您不打算将其声明或验证为 AMP,那么它就违背了整个目的。AMP 当然不是一套最佳实践。
2021-04-20 18:07:30
@Tom 这实际上是真的
2021-05-02 18:07:30
您好,能否提供一个使用 amp-iframe 加载 javascript 的 AMP 页面示例?
2021-05-10 18:07:30

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

您需要删除脚本标记。
2021-04-21 18:07:30

要在 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>
@xiaodai 请把脚本放在<head> </head>
2021-04-27 18:07:30
我没有在这找到 javascript
2021-04-29 18:07:30
@AdithyaSai javascript 被放置在 _amp-iframe 标签内
2021-05-12 18:07:30
javascript在哪里被调用?
2021-05-14 18:07:30

现在不需要使用,amp-iframe因为 AMP 原生支持 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>

这是官方amp-script规格

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

希望能帮助到你!