AMP中amp-script实现验证后页面跳转的问题求解

方法1：在amp-script中正确调用AMP.navigateTo #

AMP允许在amp-script内调用AMP.navigateTo()方法，但需满足两个核心前提：

• 确保amp-script标签配置正确：内嵌脚本需用script[type="text/plain"]声明，外部脚本需指定src并配置CORS权限
• 生成的URL需符合AMP导航规则：同源域名或已在AMP导航白名单内的跨域域名

示例代码：

<amp-script layout="container" script="search-handler">
  <button id="search-btn">搜索</button>
</amp-script>

<script type="text/plain" id="search-handler">
  const searchBtn = document.getElementById('search-btn');
  searchBtn.addEventListener('click', async () => {
    // 执行级联验证逻辑
    const selectedCity = document.getElementById('city-autocomplete').value;
    const inputTerms = document.getElementById('terms-input').value;
    const isValid = validateForm(selectedCity, inputTerms);

    if (isValid) {
      // 编码参数避免URL格式错误
      const targetUrl = `https://example.com/find?city_id=${encodeURIComponent(selectedCity)}&terms=${encodeURIComponent(inputTerms)}`;
      // 调用AMP官方导航方法
      await AMP.navigateTo(targetUrl);
    } else {
      alert('请完善合法的搜索条件');
    }
  });

  function validateForm(city, terms) {
    // 自定义级联验证逻辑，比如城市必选、关键词长度达标
    return city && terms && terms.length >= 2;
  }
</script>

方法2：结合amp-state与绑定href的a标签跳转 #

若直接调用AMP.navigateTo仍有问题，可通过amp-state存储目标URL，再绑定到隐藏a标签的href，最后触发合法点击事件：

1. 定义amp-state存储跳转地址：

<amp-state id="searchState">
  <script type="application/json">
    {"targetUrl": ""}
  </script>
</amp-state>

2. 准备隐藏的a标签，绑定href到amp-state的值：

<a id="hidden-jump-link" href="[[searchState.targetUrl]]" target="_top" style="display:none;"></a>

3. 在amp-script中更新状态并触发跳转：

<amp-script layout="container" script="search-handler">
  <button id="search-btn">搜索</button>
</amp-script>

<script type="text/plain" id="search-handler">
  const searchBtn = document.getElementById('search-btn');
  const jumpLink = document.getElementById('hidden-jump-link');

  searchBtn.addEventListener('click', async () => {
    const selectedCity = document.getElementById('city-autocomplete').value;
    const inputTerms = document.getElementById('terms-input').value;
    const isValid = validateForm(selectedCity, inputTerms);

    if (isValid) {
      const targetUrl = `https://example.com/find?city_id=${encodeURIComponent(selectedCity)}&terms=${encodeURIComponent(inputTerms)}`;
      // 更新amp-state中的跳转地址
      await AMP.setState({
        searchState: {
          targetUrl: targetUrl
        }
      });
      // 触发a标签的标准点击事件
      jumpLink.dispatchEvent(new Event('click'));
    }
  });

  function validateForm(city, terms) {
    return city && terms && terms.length >= 2;
  }
</script>

方法3：用amp-form实现带验证的GET跳转 #

如果级联验证逻辑可适配AMP内置规则，直接用amp-form的GET提交更简洁：

<form method="GET" action="https://example.com/find" target="_top">
  <!-- 省下拉选择框 -->
  <select name="state_id" id="state-select" on="change:AMP.setState({selectedStateId: event.value})">
    <option value="">选择省份</option>
    <!-- 选项省略 -->
  </select>

  <!-- 城市自动完成组件 -->
  <amp-autocomplete id="city-autocomplete" name="city_id" filter="substring" min-length="1" required>
    <input type="text">
    <!-- 数据源配置省略 -->
  </amp-autocomplete>

  <!-- 搜索输入框 -->
  <input type="text" name="terms" id="terms-input" required>

  <!-- 自定义级联验证 -->
  <amp-script script="form-validator" layout="container">
    <button type="submit">搜索</button>
  </amp-script>
</form>

<script type="text/plain" id="form-validator">
  const form = document.querySelector('form');
  form.addEventListener('submit', (e) => {
    const selectedState = document.getElementById('state-select').value;
    const selectedCity = document.getElementById('city-autocomplete').value;
    // 级联校验：必须先选省份再选城市
    if (!selectedState || !selectedCity) {
      e.preventDefault();
      alert('请先完成省份和城市的选择');
    }
  });
</script>

关键注意事项 #

• 所有URL参数必须用encodeURIComponent()编码，避免特殊字符破坏URL结构
• amp-script代码需遵守AMP沙箱限制，禁止直接使用window.location.href这类原生跳转API
• 跨域跳转需确保目标域名已添加到AMP导航白名单（可通过AMP控制台配置）

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