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; } }