要在 AMP 裡面製作選擇下拉式選單後跳轉的效果,也必須要用 AMP 的寫法,首先讀入以下這段才可以來寫 AMP 的 js:
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
接著在下拉式選單裡偵測當選單 change 的時候,透過 AMP.navigateTo 倒到你要的網址,而 url 則是從 event.value 去抓取。
<select on="change:AMP.navigateTo(url=event.value)">
<option selected value="">Choose a URL</option>
<option value="https://www.facebook.com">facebook</option>
<option value="https://www.google.com">google</option>
</select>
這樣就能做到切換下拉選單後的換頁功能了。
完整的 navigateTo 參數如下:
navigateTo(url=STRING, target=STRING, opener=BOOLEAN)
官方的敘述:
Navigates current window to given URL, to the optional specified target if given (currenly only supporting _top
and _blank
). The optional opener
parameter can be specified when using a target of _blank
to allow the newly opened page to access window.opener
.
Caveat: Using normal <a>
links is recommended wherever possible since AMP.navigateTo
is not recognized by web crawlers.