在AMP中运行JavaScript



对于JavaScript应该如何在AMP页面中运行,我有点困惑。

我知道我的JavaScript必须在iframe中执行。这样的iframe必须放在页面下方(至少从顶部的75%),并且必须通过https提供服务。这确实有效:

<amp-iframe 
  width=300 
  height=300 
  sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox" 
  layout="responsive"
  frameborder="0" 
  src="https://localhost:8000/?p=myjs">
</amp-iframe>

在那一页(https://localhost:8000/?p=myjs)我可以自由地运行我的js。

我的问题是:

我应该如何运行我的代码对主页的文档,包括iframe?

我试图访问window.parent.document,这是阻止。(当然)。

有谁能解释一下,如果我们所有的js都被杀死了,AMP的人是如何认为我们实际上可以将页面移植到AMP的?推荐的模式是什么让我们的js在AMP页面上运行?是否存在这样的事情,或者只是假设开发人员必须转储他们所有的代码?

谢谢

我应该如何运行我的代码对主页的文档,包括iframe?

你不是。

有谁能解释一下,如果我们所有的js都被杀死了,AMP的人是如何认为我们实际上可以将页面移植到AMP的?

这个想法是你编写轻量级的页面,不依赖于JavaScript。

从规格:

AMP HTML是HTML的一个子集,用于以保证某些基准性能特征的方式创作内容页面(如新闻文章)。

"诸如新闻文章之类的内容页面"不需要JavaScript。如果你不写那种类型的页面,那么也许AMP HTML不是一个好的语言选择,你应该坚持HTML 5。

正如另一位评论者所说,AMP的一个基本支柱是您不能运行自己的JavaScript。我们的想法是使网页更快,更简单,更可靠。

你确实可以在iframe中运行JS,但是JS与主页面的交互将受到高度限制。

所以使用像vue.js这样的框架与AMP的观点背道而驰。

另一方面,AMP带有各种内置的东西,消除了大多数JS的需要。它是一个web组件库。并且通过And可以实现相当数量的动态交互和服务器通信。

在AMP Conf 2018上介绍了使用web worker在AMP中支持自定义JS。它应该在今年晚些时候准备好。

截至2019年4月11日官方公告,

现在您可以在AMP页面中包含自定义JavaScript

AMP页面通过<amp-script>组件支持自定义JavaScript。

尝试amp-script示例

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

google似乎正在推动amp作为新的需求。人们说它是用来发布"新闻"的,但谷歌似乎并没有朝这个方向发展。以下是amp项目对amp的用途的说明:

网页速度改善了用户体验和核心业务指标。AMP页面几乎立即加载,使您能够在链接到AMP页面的所有设备和平台(包括Google, Bing, LinkedIn等)上提供一致的快速体验。这些性能的提高通常转化为重要数字的改善,如在页面上花费的时间、回访次数和点击率。

我没有看到任何关于撰写新闻文章的提及。言下之意是你需要采用它,但我不这么认为。它是高度限制和消除创造力。国际海事组织。

刚刚看到我对这个问题的旧答案,现在已经过时了。

AMP现在提供<amp-script>作为在AMP中包含自定义JavaScript的一种方式,在Web Worker中。在这里查看文档。或者试试这个教程。

此外,如果有效的AMP对您不重要,欢迎您包含所有您想要的JavaScript !它就是无法通过验证。最近Google Search中的公告可能会使有效的AMP不那么重要,这取决于您的用例。

最新更新