AMP-state 无法与 AMP.navigateTo() 配合使用的问题求助

这个问题我之前也碰到过，AMP的AMP.navigateTo()在处理动态target参数的时候确实有一些限制，咱们来一步步拆解解决：

问题根源 #

AMP的安全模型对navigateTo的target参数有严格限制，它不支持直接通过amp-bind绑定动态的amp-state值——这会导致AMP解析时无法正确获取target值，最终抛出Target 'null' not supported的异常。

可行的解决办法 #

方法1：使用条件动作分支（适合target值有限的场景） #

如果你的target只有几种固定可能（比如_self和_blank），可以通过amp-bind的条件判断来触发不同的navigateTo动作：

<!-- 先定义amp-state -->
<amp-state id="pageState">
  <script type="application/json">
    {"target": "_blank"}
  </script>
</amp-state>

<!-- 按钮绑定条件动作 -->
<button 
  on="tap: pageState.target == '_blank' ? AMP.navigateTo(url='https://example.com', target='_blank') : AMP.navigateTo(url='https://example.com', target='_self')"
>
  跳转页面
</button>

这种方式利用AMP的原生条件动作语法，根据amp-state的值选择对应的导航逻辑，完全符合AMP的规则。

方法2：用amp-script实现灵活的动态导航（适合复杂场景） #

如果需要更灵活的动态target控制，比如target值来自用户输入或复杂逻辑，可以使用amp-script来处理：

<amp-state id="pageState">
  <script type="application/json">
    {"target": "_blank"}
  </script>
</amp-state>

<amp-script layout="container" script="navigate-handler">
  <button id="navBtn">跳转页面</button>
</amp-script>

<script id="navigate-handler" type="text/plain" target="amp-script">
  const btn = document.getElementById('navBtn');
  btn.addEventListener('click', async () => {
    // 获取amp-state的值
    const state = await AMP.getState('pageState');
    // 调用导航API，传入动态target
    await AMP.navigateTo({
      url: 'https://example.com',
      target: state.target || '_self' // 兜底处理避免null
    });
  });
</script>

amp-script允许我们编写自定义JavaScript逻辑，绕过navigateTo参数的静态限制，同时保持AMP的安全性。

额外注意事项 #

• 确保你的amp-state已经正确初始化，避免target值为null或未定义；
• 如果使用amp-script，要注意脚本的大小限制（不能超过150KB），并且遵循AMP的amp-script安全规则。

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