求助：如何让随机URL跳转功能在AMP页面正常运行？

你的代码在普通HTML中正常，但在AMP的amp-script中失效，核心原因是AMP的沙箱执行环境和DOM生命周期约束，以下是具体修复方案：

问题根源 #

1. amp-script的代码运行在隔离沙箱中，全局作用域的DOM操作可能在目标元素未加载完成时执行，导致无法找到.random类的链接。
2. AMP对外部脚本有严格的CSP（内容安全策略）限制，若外部脚本域名未在AMP允许列表中，会被拦截执行。
3. 直接在全局作用域修改DOM属性，不符合AMP的生命周期规范。

修复方案 #

方案1：使用AMP生命周期钩子+内联脚本（推荐） #

将脚本改为内联形式（避免外部域名CSP问题），并通过AMP.onReady()确保DOM就绪后再执行操作：

修改后的HTML代码：

<html amp lang="id">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="robots" content="index, follow"/>

<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
</head>

<body>
<div>
<p>
<a title="search-engine" href="/" target="_blank" rel="noopener noreferrer" class="random">click here</a> for random search engine
</p>
</div>

<amp-script layout="container" script="random-url-script"></amp-script>
<!-- 内联脚本，避免外部CSP限制 -->
<script id="random-url-script" type="text/plain" target="amp-script">
function getUrlweb() {
    var urlweb = [
        'https://www.google.com/',
        'https://www.yahoo.com/',
        'https://yandex.com/',
        'https://duckduckgo.com/',
    ];
    return urlweb[Math.floor(Math.random() * urlweb.length)];
}

// 等待AMP和DOM就绪后执行操作
AMP.onReady(function() {
    const links = document.getElementsByClassName("random");
    for (let i = 0; i < links.length; i++) {
        links[i].href = getUrlweb();
    }
});
</script>
</body>
</html>

方案2：保留外部脚本，调整执行时机 #

若必须使用外部脚本，需确保：

1. 脚本域名已添加到AMP的CSP允许列表（需配置站点的AMP设置）。
2. 脚本中使用AMP.onReady()包裹DOM操作：

修改后的外部JS代码：

function getUrlweb() {
    var urlweb = [
        'https://www.google.com/',
        'https://www.yahoo.com/',
        'https://yandex.com/',
        'https://duckduckgo.com/',
    ];
    return urlweb[Math.floor(Math.random() * urlweb.length)];
}

AMP.onReady(function() {
    const curlweb = document.getElementsByClassName("random");
    for (let i = 0; i < curlweb.length; i++) {
        curlweb[i].href = getUrlweb();
    }
});

同时在HTML中给amp-script添加layout="container"属性：

<amp-script layout="container" src="你的外部脚本地址"></amp-script>

备选方案：点击时动态跳转（兼容更严格的AMP场景） #

如果初始化修改href仍失效，可改为点击时触发跳转，绕开AMP对静态href的限制：

修改内联脚本部分：

function getUrlweb() {
    var urlweb = [
        'https://www.google.com/',
        'https://www.yahoo.com/',
        'https://yandex.com/',
        'https://duckduckgo.com/',
    ];
    return urlweb[Math.floor(Math.random() * urlweb.length)];
}

AMP.onReady(function() {
    const links = document.getElementsByClassName("random");
    for (let i = 0; i < links.length; i++) {
        links[i].addEventListener('click', function(e) {
            e.preventDefault();
            window.open(getUrlweb(), '_blank', 'noopener noreferrer');
        });
    }
});

关键注意事项 #

• amp-script必须指定布局属性（如layout="container"），否则无法正常渲染。
• 内联脚本需用type="text/plain"和target="amp-script"标记，避免被浏览器直接执行。
• 外部脚本必须通过HTTPS访问，且域名需符合AMP的CSP规则。

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