如何在 AMP 页面上的每个标签上附加查询字符串？答案

【问题标题】：How to append query string on each a tag on an AMP page?如何在 AMP 页面上的每个标签上附加查询字符串？
【发布时间】：2020-01-02 11:30:54
【问题描述】：

我正在尝试将查询字符串附加到 AMP 页面上的每个链接。以下是我的代码： Javascript代码：

var a = document.getElementsByTagName('a'),length = a.length;

for(var i=0; i< length; i++){
  a[i].href += '?key=value';
}

HTML 代码：

<amp-script layout="container" src="https://example.com/custom.js">
</amp-script>

amp 脚本如何工作。我用对了吗？脚本不工作。

【问题讨论】：

有什么问题？
脚本不工作。
您的 HTML 中没有任何锚点 a 元素，长度将为 0，并且循环永远不会起作用。如果标签是“amp-script”，则在选择中将“a”替换为“amp-script”，将.href 替换为.src
我有，我的body标签中有多个标签。
amp.dev/documentation/components/amp-script

标签： javascript amp-html

【解决方案1】：

AMP 框架通过 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/your_scripts.js">
    <p>Any content that can be modified from javascript</p>
  </amp-script>
</body>
</html>

允许所有事件触发器

AMP 文档

https://amp.dev/documentation/guides-and-tutorials/develop/custom-javascript/?format=websites

【讨论】：

感谢您解释这个场景。如果要更改正文中所有 a 标签的 href 属性会怎样？我需要将整个标记包装到中吗？
AMP-Script 在包含虚拟 DOM 的 Web Worker 中运行您的自定义 JavaScript（Web Worker 是一种让 Web 内容在后台线程中运行脚本的简单方法）。当您的 javascript 代码修改此虚拟 DOM 时，amp-script 会将这些更改转发到主线程并将它们应用到 amp-script 元素子树。
比如给document.body添加一个元素： //your_script.js const p = document.createElement('p'); p.textContent = '我被添加到正文中了！'; document.body.appendChild(p);将作为 amp-script 元素的新子元素反映在页面上：example.com/your_scripts.js" width="300" height="100">
我被添加到正文中！