IE9瀏覽器固定網站功能的實現方法

時間 2020-06-05

原文原文鏈接

IE9測試版已經出來一段時間了，它完善了對 HTML五、CSS3 的支持，在界面上有了很大的調整，加強了安全措施，不過在這個百花齊放的時代，這些也不算什麼亮點。若是要說IE9瀏覽器最獨特的地方，估計也就是今天提到的Site Pinning（固定網站）功能了，它可以將一個網站如同程序固定在 Windows Vista 和 Windows 7 的任務欄中，而且在點擊圖標後顯示一個相關網站的列表。對於支持此功能的網站，還能定義圖標、導航按鈕顏色、Jump List、Thumbnail Toolbar 等內容。我想看這篇文章的人都應該知道IE9瀏覽器的這個功能是什麼樣子了。若是你還了解這項功能，能夠先閱讀這篇文章：IE9網站鎖定功能與Bing的結合示範。那麼咱們怎麼讓網站支持它呢？web

微軟提供了一系列方法使得網站支持 Site Pinning，能夠參見如下兩個 Demo。瀏覽器

經過 Meta 定義程序名稱、描述、導航按鈕顏色、Jump List 工做列表、起始頁，請按此；
經過 JavaScript 動態定義覆蓋圖標、Jump List 與 Thumbnail Toolbar，請按此。

這兩個 Demo 都須要使用 IE9 瀏覽，並將標籤拖動到任務欄固定後才能觀察效果。安全

1、經過 META 定義

HTML語言:app

在網頁的<head>標記內，加入以下的代碼：ide

<meta name=」application-name」 content=」IE9 Test」 />函數

<meta name=」msapplication-tooltip」 content=」Ray’s IE9 Test」 />測試

<meta name=」msapplication-window」 content=」width=1024;height=768″ />網站

<meta name=」msapplication-task」 content=」name=主頁;action-uri=/;icon-uri=/favicon.ico」 />url

<meta name=」msapplication-task」 content=」name=留言;action-uri=/guestbook;icon-uri=/favicon.ico」 />spa

<meta name=」msapplication-task」 content=」name=關於;action-uri=about;icon-uri=/favicon.ico」 />

<meta name=」msapplication-navbutton-color」 content=」#0000ff」 />

<meta name=」msapplication-starturl」 content=」/」 />

其中包括兩個屬性：

Name包括的內容：msapplication-task、msapplication-tooltip等等

Content包括的內容：name顯示的文字，action-uri 點擊後轉到的地址。Icon-uri 顯示在前面的圖標地址。等等

這個仍是蠻簡單的，一看就明白，我就很少說了。

上面代碼咱們還定義了IE9瀏覽器界面上的「上一頁」跟「下一頁」按鈕的顏色，這樣咱們就能夠根據網站的的主色系來自動調整按鈕顏色。

顏色的表示法可以使用顏色名稱，例如要顯示成×××，就要：

也可以使用 16位的顏色代碼：

效果以下：

2、經過 JAVASCRIPT 定義

主要是用到了 IE9 提供的幾個 API，因此確定要作錯誤處理，否則換成其它瀏覽器就死翹翹了（喂，這又是 IE Only 耶）。

window.external.msIsSiteMode()
返回當前 Internet Explorer 窗口是否做爲「固定網站」打開。
使用這個方法區別正常瀏覽模式與「固定網站」模式。
window.external.msAddSiteMode()
將當前網站添加到開始菜單，並將網站做爲「固定網站」打開，但沒有固定到任務欄。
window.external.msSiteModeSetIconOverlay(bstrIconUrl [, bstrDescription])
添加「覆蓋圖標」。
bstrIconUrl: 圖標 URL；
bstrDescription: 提供圖標的描述。
window.external.msSiteModeClearIconOverlay()
清除「覆蓋圖標」。
window.external.msSiteModeCreateJumpList(bstrHeader)
建立一個新的 Jump List，併爲其指定名稱。
只可以建立一個 Jump List。
window.external.msSiteModeClearJumpList()
清除 Jump List。
window.external.msSiteModeAddJumpListItem(bstrName, bstrActionUri, bstrIconUri)
增長一個 Jump List 項目，最多能夠存在 20 個 Jump List 項目。
bstrName: 顯示的名稱；
bstrActionUri: 單擊時轉向的絕對或相對 URL；
bstrIconUri: 顯示的圖標絕對或相對 URL。
window.external.msSiteModeShowJumpList()
更新 Jump List。
對 Jump List 做出修改後，使用這個方法更新顯示。

如下是實現 Thumbnail Toolbar 的方法。

爲 msthumbnailclick 事件設置監聽。
document.addEventListener(‘msthumbnailclick’, onButtonClicked, false);
添加按鈕。這個函數將返回按鈕 ID。
var btnPlay = window.external.msSiteModeAddThumbBarButton(iconUri, toolTip);
顯示 Thumbnail Toolbar。
window.external.msSiteModeShowThumbBar();
對 Thumbnail Toolbar 的單擊事件做出響應。 function onButtonClicked(e) { switch (e.buttonID) { case btnPlay: play(); break; } }