gpt4 book ai didi

javascript - 将 Jquery 添加到 AMP 页面

转载 作者:行者123 更新时间:2023-12-01 04:35:10 24 4
gpt4 key购买 nike

加速移动页面 (AMP) 对我来说非常有吸引力,因为它们的加载速度。

大规模运行付费流量时,立即加载的着陆页可以使您的投资返回率翻倍。

我正在为电子商务产品创建自定义登录页面。该页面将有:

  • 顶部的导航链接可以通过单击按钮来显示或隐藏
  • 调查界面,询问用户问题并相应地显示信息
  • 根据某些按钮的点击,执行某些操作。例如触发 FB 广告像素事件
  • 使用 jquery 滚动允许用户导航到单个页面中的每个部分

我习惯将 Jquery 包含在 <head> 中并将我的所有代码写在一个部分中。这将在 DOM 加载时加载......并且一切正常。快乐的时光。

但是,阅读有关“在 AMP 页面中包含自定义 JavaScript”的文档感觉会变得非常困难。根据我所看到的,几乎不可能。

请参见此处:https://amp.dev/documentation/guides-and-tutorials/develop/custom-javascript/

看来我必须为每个自定义 JS 创建一个标签。使用“src”属性链接到我的 JS 文件。但是,JS 文件只能执行此标记内的代码。

该文档还指出,

AMP enforces a limit of 150 kilobytes of custom JavaScript on each page. This limit is shared among all component on that page. If using a library, it must be imported to each individual component.

Jquery 大约 100 KB...如果我必须在每个 <amp-script> 中包含这个库标签,这意味着我实际上不能使用多个标签?

我可以将整个 body 包含在这个<amp-script>中吗?标签?

这是否意味着我必须有一个 JS 文件,我必须将 Jquery 库复制到其中。然后我的自定义代码也包含在该文件中吗?

最佳答案

据我了解文档,您可以包装需要自定义js的区域。如果您需要在所有页面中使用脚本,只需使用 amp-script 标签包裹所有内容即可。 - 我自己从来没有这样做过,但这似乎值得一试。我有兴趣知道它是否有效。

<body>
<amp-script layout="container" src=".../script.js">
...
</amp-script>
</body>

考虑

The DOM inside tags should be almost identical before and after initialization.

If your amp-script logic is not preforming a fetch, the DOM has less than one second to update the DOM. If a script mutates the DOM outside of the permitted window, it will result in a fatal error and the amp-script component will terminate the Web Worker. A terminated component will not run again.

祝你好运!

关于javascript - 将 Jquery 添加到 AMP 页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58586823/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com