IE9 的鎖定網站及跳躍清單（下）

  • Article

在前一篇文章中介紹了鎖定網站中可以使用 <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', 
    'https://www.example.com/path/to/action1', 
    'https://www.example.com/path/to/icon1.ico');
  ...
}

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

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

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

參考資料