在 amp 脚本中导航答案

【问题标题】：Navigate in amp-script在 amp 脚本中导航
【发布时间】：2022-10-07 20:42:02
【问题描述】：

我有一个设置状态“selectedStateId”的输入选择，一个设置“selectedCity”的amp-autocomplete，最后一个输入文本作为设置“inputTerms”的搜索栏。

有了这些，我创建了一个 URL，例如：https://example.com/find?city_id=selectedCity&terms=inputTerms

问题是，我需要在级联中进行一些验证，所以我创建了一个 amp-script

<amp-script script="searchValidationScript" data-ampdevmode target="amp-script">
  <button type='button' class="button button-primary" id="header-search-button">
      <amp-img
      alt="magnifying-glass"
      src="{{ url_for('static', filename='img/icons/magnifying-glass.svg') }}"
      height="20"
      width="21"
      ></amp-img>
  </button>
</amp-script>
<script id="searchValidationScript" type='text/plain' target="amp-script">
    const searchBtn = document.getElementById('header-search-button');
    const btnSend = document.getElementById('btn-send');
    const lightbox = document.getElementById('lightbox-input-states');

    async function validateAndRedirect() {
        const currentCityId = await AMP.getState('currentCityId');
        const currentStateId = await AMP.getState('currentStateId');
        const inputTerms = await AMP.getState('inputTerms');

        if ( !inputTerms || inputTerms?.length < 2 ) return

        if ( !currentCityId || !currentStateId ) return AMP.setState({showLightbox: true})

        const urlX = `/{{ current_country.permalink }}/find?city_id=${currentCityId}&terms=${inputTerms}`
        AMP.setState({url: urlX})
    }

    searchBtn.addEventListener('click', validateAndRedirect);
</script>

当我点击搜索按钮时，我想重定向到我创建的网址。

我尝试在 amp-script 中执行 AMP.navigateTo(url=myUrl)，也使用 <a [href]='myUrl' hidden>，然后在 amp-script aTag.click() 中，同样带有表单标签和更多示例，但我无法正常工作。

哪一种方法可以解决这个问题？

【问题讨论】：

您是否设置了元值，例如<meta name="amp-script-src" content="sha384-" />
是的，我已经设置了那个元标记
您在开发控制台中看到了什么？例如，您是否获取 src 目标？你在哪里设置amp-state 值？

标签： amp-html ampscript asynchronous-messaging-protocol

【解决方案1】：

我也有同样的问题。

如我所见，AMP.navigateTo 仅适用于用户手势和来自 amphtml：

<select on="change:AMP.navigateTo(url='https://')">
<button on="tap:AMP.navigateTo(url='https://')">
<form action-xhr="" on="submit-success: AMP.navigateTo(url='https://')"

而且您不能从脚本中提交/单击/等这些元素。

【讨论】：