AMP 如何从带有 ref 的链接动态获取 href

Question

我处于一种情况，我想从我的AMP 网页的规范url 获取href并将其添加到一个AMP 按钮，点击按钮后，事件会打开一个带有规范 URL 的新页面。

我想通过代码动态地做到这一点。

我可以使用 amp-binding，但我不想向规范 URL 添加任何 amp-binding。

这是我的AMP代码的规范网址，我想导航到销售按钮被点击之后。

注意：在 AMP 中，您点击一个按钮，然后会触发一个操作，这与HTML中您所说的click 不同。

有谁知道如何做到这一点，并告诉我如何做到这一点？

 <link rel="canonical" href="https://mysaleswebsite.com/salepage.php"/> <div align="center" class="img-wrapper"> <amp-img on="tap:AMP.navigateTo(url='GET_URL_FROM_CANONICAL_LINK#productX', target='_blank', opener=true)" src="img/salesbuttonpicture.jpg" height="50" width="100" alt="Sales Page"> </amp-img> </div>

Answer 1

我要做的第一件事是给出相应的标签 ID。

<link id="canonicalUrl" rel="canonical" href="https://mysaleswebsite.com/salepage.php"/>
<amp-img id="ampButton" src="img/salesbuttonpicture.jpg" height="50" width="100" alt="Sales Page"></amp-img>

然后，您可以引用这些元素 ID 的属性来相应地获取和分配 URL。

<script>
    const canonicalUrl = document.getElementById('canonicalUrl').href;
    document.getElementById('ampButton').setAttribute("on", "tap:AMP.navigateTo(url='" + canonicalUrl + "#productX', target='_blank', opener=true)'")
</script>

我对 AMP 一无所知，也不知道这是否会做任何无法预料的事情。