IE9浏览器固定网站功能的实现方法

欢迎您访问我爱IT技术网，今天小编为你分享的是IE技巧方面的电脑教程：【IE9浏览器固定网站功能的实现方法】，平时在使用IE浏览器上网的时候，总会遇上这或那的问题，那本文就针对这些日常的问题收集并整理成IE技巧分享给大家！

IE9浏览器固定网站功能的实现方法

IE9测试版已经出来一段时间了，它完善了对 HTML5、CSS3 的支持，在界面上有了很大的调整，增强了安全措施，不过在这个百花齐放的时代，这些也不算什么亮点。如果要说IE9浏览器最独特的地方，估计也就是今天提到的Site Pinning（固定网站）功能了，它能够将一个网站如同程序固定在 Windows Vista 和 Windows 7 的任务栏中，并且在点击图标后显示一个相关网站的列表。对于支持此功能的网站，还能定义图标、导航按钮颜色、Jump List、Thumbnail Toolbar 等内容。我想看这篇文章的人都应该知道IE9浏览器的这个功能是什么样子了。如果你还了解这项功能，可以先阅读这篇文章：IE9网站锁定功能与Bing的结合示范。那么我们怎么让网站支持它呢？<>

微软提供了一系列方法使得网站支持 Site Pinning，可以参见以下两个 Demo。

1. 通过 Meta 定义程序名称、描述、导航按钮颜色、Jump List 工作列表、起始页，请按此；
2. 通过 JavaScript 动态定义覆盖图标、Jump List 与 Thumbnail Toolbar，请按此。

这两个 Demo 都需要使用 IE9 浏览，并将标签拖动到任务栏固定后才能观察效果。

一、通过 Meta 定义

HTML语言:

在 网页的标记内，加入如下的代码：

其中包括两个属性：

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

Content包括的内容：name显示的文字，action-uri 点击后转到的地址。Icon-uri 显示在前面的图标地址。等等

这个还是蛮简单的，一看就明白，我就不多说了。

上面代码我们还定义了IE9浏览器界面上的「上一页」跟「下一页」按钮的颜色，这样我们就可以根据网站的的主色系来自动调整按钮颜色。

颜色的表示法可使用颜色名称，例如要显示成黄色，就要：

也可使用 16位的颜色代码：

效果如下：

二、通过 JavaScript 定义

主要是用到了 IE9 提供的几个 API，所以肯定要做错误处理，不然换成其它浏览器就死翘翘了（喂，这又是 IE Only 耶）。

1. window.external.msIsSiteMode()

   返回当前 Internet Explorer 窗口是否作为“固定网站”打开。

   使用这个方法区别正常浏览模式与“固定网站”模式。

2. window.external.msAddSiteMode()

   将当前网站添加到开始菜单，并将网站作为“固定网站”打开，但没有固定到任务栏。

3. window.external.msSiteModeSetIconOverlay(bstrIconUrl [, bstrDescription])

   添加“覆盖图标”。

   bstrIconUrl: 图标 URL；

   bstrDescription: 提供图标的描述。

4. window.external.msSiteModeClearIconOverlay()

   清除“覆盖图标”。

5. window.external.msSiteModeCreateJumpList(bstrHeader)

   创建一个新的 Jump List，并为其指定名称。

   只能够创建一个 Jump List。

6. window.external.msSiteModeClearJumpList()

   清除 Jump List。

7. window.external.msSiteModeAddJumpListItem(bstrName, bstrActionUri, bstrIconUri)

   增加一个 Jump List 项目，最多可以存在 20 个 Jump List 项目。

   bstrName: 显示的名称；

   bstrActionUri: 单击时转向的绝对或相对 URL；

   bstrIconUri: 显示的图标绝对或相对 URL。

8. window.external.msSiteModeShowJumpList()

   更新 Jump List。

   对 Jump List 作出修改后，使用这个方法更新显示。

以下是实现 Thumbnail Toolbar 的方法。

1. 为 msthumbnailclick 事件设置监听。

   document.addEventListener('msthumbnailclick', onButtonClicked, false);

2. 添加按钮。这个函数将返回按钮 ID。

   var btnPlay=window.external.msSiteModeAddThumbBarButton(iconUri, toolTip);

3. 显示 Thumbnail Toolbar。

   window.external.msSiteModeShowThumbBar();

4. 对 Thumbnail Toolbar 的单击事件作出响应。

   function onButtonClicked(e) {

   switch (e.buttonID) {

   case btnPlay:

   play();

   break;

   }

   }

演示网页来源：beamnote

关于IE9浏览器固定网站功能的实现方法的用户使用互动如下：

　　相关问题：IE浏览器里常用网址怎么设置成固定的

　　答：把鼠标放在空白的 会出现＋号 点下 填上你要上的网址 安确定 就行了 >>详细

　　相关问题：怎样让浏览器只能打开一个固定网站

　　答：给IE加密. 效果是:你可以把指定的几个网址添加进去,没被加进去的所有网站,访问题都需要密码.密码只有你自己设,自己知道. 具体操作: 打开IE,菜单-工具-internet选项-内容-启用-许可站点 把自认为是安全的网址添加进去 并在常规中,"创建密码" 并把... >>详细

　　相关问题：如何设置随便打开一个网页都是固定的浏览器

　　答：设置这个浏览器为所有网页文件的默认程序即可，以win7为例设置方法如下： 1、点击开始，点击默认程序； 2、点击设置默认程序； 3、左侧列表找到需要设置的浏览器，点击右侧键此程序设置为默认值即可。 >>详细