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

Question

我想从 AMP 网页 的 canonical 网址获取 href 并将其添加到一个 AMP 按钮，在按钮 tap 上，事件会打开一个带有规范 URL 的新页面。

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

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

这是我的 AMP 代码，其中包含 canonical URL，我希望在 点击 销售按钮后导航到该代码。

注意：在 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 一无所知，也不知道这是否会造成无法预料的后果。