如何在AMP页面中实现重定向？能否适配指定JavaScript代码？

嘿，我来帮你搞定AMP页面的重定向和那个下拉菜单跳转的问题！

一、AMP页面的重定向实现 #

AMP对普通JS有严格限制，但重定向还是有几种合规的实现方式，分两种场景：

1. 页面加载时自动重定向 #

如果需要页面一加载就立刻跳转到其他页面，直接用标准的meta刷新标签就行，AMP是允许这种方式的：

<meta http-equiv="refresh" content="0; url=https://your-target-url.com">

content里的0是延迟跳转的秒数，设为0就是立即跳转，你可以根据需求调整数值。

2. 交互触发的重定向（比如按钮点击） #

这种情况不能直接写自定义的onclick事件，得用AMP官方允许的组件来实现，下面结合你的下拉菜单需求详细说。

二、适配你的下拉菜单跳转代码 #

你原来的代码用了自定义的onclick事件和JS函数，这在AMP里是违规的（AMP禁止inline脚本和未授权的自定义脚本），不过这个需求完全可行，给你两个合规的实现方案：

方案1：用amp-bind + 链接（简单快捷） #

利用AMP的数据绑定功能，把下拉框的值绑定到链接的URL上，点击链接触发跳转：

<select id="url" on="change:AMP.setState({targetUrl: event.value})">
  <option value='home'>home</option>
  <option value='contact'>contact</option>
</select>
<!-- 这里假设目标是相对路径，要是绝对路径直接写完整地址就行 -->
<a id="redirectLink" href="home" [href]="targetUrl" style="padding: 8px 16px; background: #007bff; color: white; text-decoration: none;">ir</a>

简单解释下：

• 当下拉框选项改变时，on="change:AMP.setState({targetUrl: event.value})"会把选中的值存入AMP的状态变量targetUrl
• [href]="targetUrl"是用amp-bind把链接的href属性绑定到targetUrl，状态变了链接地址自动更新
• 把原来的按钮换成样式像按钮的链接，完全不影响用户体验

方案2：用amp-script（适合复杂逻辑） #

如果你之后需要更复杂的跳转逻辑，比如加参数、做判断，可以用amp-script组件，它允许在AMP页面中运行受限制的自定义JS：

<amp-script layout="container" src="https://your-domain.com/redirect-script.js">
  <select id="url">
    <option value='home'>home</option>
    <option value='contact'>contact</option>
  </select>
  <input type="button" value='ir' id="redirectBtn">
</amp-script>

然后在外部的redirect-script.js文件里写逻辑：

const btn = document.getElementById('redirectBtn');
const select = document.getElementById('url');

btn.addEventListener('click', () => {
  const url = select.value;
  // AMP里跳转用window.location.href是允许的，别用其他违规的DOM操作就行
  window.location.href = url;
});

注意：amp-script的脚本文件必须是同源的（和你的AMP页面同域名），或者通过CORS配置允许，而且要符合AMP的脚本限制，别写违规代码。

三、最后提醒 #

不管用哪种方案，都记得用AMP官方的验证工具检查页面是否合规，避免出现验证错误影响页面的搜索引擎表现。

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