如何在AMP HTML中修改当前URL？

Question

在我的网站上，产品过滤是通过修改URL在服务器端完成的。例如，如果要为包含alpha、beta和gama标签的产品过滤类别，则在URL结尾处添加?q=alpha+beta+gama。 如果有人按下按钮，我希望从URL中删除"beta"。

在非AMP页面中使用javascript似乎很容易，但是我找不到在AMP中实现它的方法。

是否有一个可以查找当前URL并基于关键字删除一些关键字的脚本？

我计划使用表单来实现这一点。该表单将具有多个输入字段。在按下提交按钮时，将获取表单中的输入字段，并将它们附加到当前URL。

情况1：

The current url is website.com/?view=amp
Desirable url is website.com/?view=amp&q=alpha+beta+gama

情境2

Current url is website.com/?view=amp&q=alpha+beta+gama+delta
Second desirable URL is website.com/?view=amp&q=alpha+gama

- Arpan Jain

---

这似乎是使用 amp-link-rewriter 的一个案例。你尝试过吗？ - GOTO 0

这并不能解决我的目的。 - Arpan Jain

Answer 1

我们无法读取当前的URL并在AMP中操纵它。

如何在AMP中创建动态URL（或链接）的解决方案？

我们应该有一个状态策略来在AMP中创建动态URL。我们应该在服务器端呈现默认状态，并在状态改变时创建动态URL。例如：

默认状态（在服务器端呈现）：

<amp-state id="filters">
  <script type="application/json">
    {
      "alpha": "",
      "beta": "",
      "gama": ""
    }
  </script>
</amp-state>

基于状态的动态URL：

<a href="website.com/?view=amp" data-amp-bind-href="'website.com/?view=amp&q=' + filters.alpha + (filters.beta ? '+' + filters.beta : '') + (filters.gama ? '+' + filters.gama : '')">dynamic link</a>

- Masih Jahangiri

Answer 2

根据您的使用情况，您可以简单地使用 amp-bind 来在用户添加/更改默认输入值时不断更新URL。

例如：

<label>Username
    <input name="username" on="change:AMP.setState({name: event.value})"/>
</label>
<a href="example.com/default-url" [href]="'example.com/default-url?name=' + name">Submit</a>

所以，您需要默认提供一个URL作为href的值，[href]将在输入框上进行任何更改时更新默认URL（除去amp-bind仅在触发具有AMP操作的元素时有效）。您可以在此处了解有关执行操作（即任何更改）以更改URL的更多信息。

- Akansh