[AMP] 製作下拉選單選擇後頁面跳轉的效果

分享:
AMP

要在 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.

 

官方文件說明

 

課程推薦

和我們交流

加入我們的社群,裡面會有一些技術的內容、有趣的技術梗,以及職缺的分享,歡迎和我們一起討論。