如何为JavaScript link方法生成的链接添加rel=nofollow及适配AMP页面

为str.link()生成的链接添加rel="nofollow"属性 #

原生String.prototype.link()是旧标准定义的字符串方法，仅支持传入URL参数生成基础<a>标签，不支持自定义rel等额外属性，因此无法直接通过该方法添加nofollow，推荐替换为更灵活的实现方案：

方案1：手动拼接标签字符串（适合简单场景） #

var str = "Free Web Building Tutorials!";
var targetUrl = "https://www.w3schools.com";
// 手动拼接带nofollow属性的链接标签
var result = `<a href="${targetUrl}" rel="nofollow">${str}</a>`;
document.getElementById("demo").innerHTML = result;

方案2：DOM API生成（更安全，避免XSS风险） #

var str = "Free Web Building Tutorials!";
var targetUrl = "https://www.w3schools.com";
var linkNode = document.createElement("a");
linkNode.href = targetUrl;
linkNode.rel = "nofollow";
linkNode.textContent = str;
document.getElementById("demo").appendChild(linkNode);

AMP页面运行适配方案 #

原有直接操作innerHTML的代码无法直接在AMP页面运行：AMP框架默认禁止自定义内嵌JS执行、禁止直接通过innerHTML插入动态内容，需使用AMP官方提供的<amp-script>组件实现相同逻辑，步骤如下：

1. 首先在AMP页面<head>中引入amp-script组件的官方加载脚本（符合AMP规范要求）
2. 替换原有DOM结构为amp-script容器包裹目标元素，将自定义JS放入指定类型的内联脚本中，示例代码如下：

<!-- head中引入组件 -->
<script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>

<!-- 页面body中的内容结构 -->
<amp-script layout="fixed-height" height="50" script="custom-link-script">
  <p id="demo"></p>
</amp-script>

<!-- 自定义逻辑脚本，注意type属性必须为text/plain -->
<script id="custom-link-script" type="text/plain" target="amp-script">
  const str = "Free Web Building Tutorials!";
  const targetUrl = "https://www.w3schools.com";
  const demoNode = document.getElementById("demo");
  const linkNode = document.createElement("a");
  linkNode.href = targetUrl;
  linkNode.rel = "nofollow";
  linkNode.textContent = str;
  demoNode.appendChild(linkNode);
</script>

注意事项 #

• 内联amp-script脚本大小上限为150KB，超出需引用外部脚本，外部脚本同样大小上限为150KB
• JS仅可操作amp-script容器内部的DOM元素，无法修改容器外的页面内容
• 不可使用AMP规范禁止的浏览器API，如alert、同步XHR等

内容的提问来源于stack exchange，提问作者Wawang Setiawan