在前一篇文章中介紹了鎖定網站中可以使用 <meta> 標籤來建立跳躍清單中的工作。這一篇文章將介紹如何利用 JavaScript 來製作動態的跳躍清單選項。

判斷是否已被鎖定

網頁開發者可以利用 JavaScript 來判斷目前網站是否已經被使用者鎖定(pinned),只要利用 window.external.msIsSiteMode() 方法:

// 檢查是否有定義 window.external.msIsSiteMode
if (window.external && window.external.msIsSiteMode &&
    window.external.msIsSiteMode()) {
  // 是鎖定的網站
}

如此一來,在確定使用者已經鎖定網站之後,以下的動作才有意義。

建立自訂的工作類別

使用 <meta> 標籤所建立的跳躍清單選項,都會被置放於「工作」(Tasks)的類別下,如果網頁開發者想要自行建立類別,則可以透過 JavaScript 呼叫 window.external.msSiteModeCreateJumpList 方法:

if (window.external.msIsSiteMode()) {
  window.external.msSiteModeCreateJumpList("我的自訂類別");
  ....
}

參數就是自訂類別的名稱,若參數為空白,則表示移除所有的自訂類別

加入自訂的工作項目

建立了自訂類別之後,若要再加入自訂的動作,則是使用 window.external.msSiteModeAddJumpListItem() 方法來加入工作項目:

if (window.external.msIsSiteMode()) {
  var ex = window.external;  
  ex.msSiteModeCreateJumpList('我的自訂類別');
  ex.msSiteModeAddJumpListItem('Action 1', 
    'http://www.example.com/path/to/action1', 
    'http://www.example.com/path/to/icon1.ico');
  ...
}

這個方法的三個參數依序為:

  • 項目名稱,會顯示在跳躍清單上的名稱
  • 動作的URL,點擊這個工作項目後的URL位置
  • 圖示的URL,工作項目的圖示

如此一來,網頁開發者便能因應需要,動態地使用 JavaScript 來改變跳躍清單的內容。下圖是 Amazon 網站使用此方式建立自訂類別及工作項目的圖示:

參考資料