IE9浏览器固定网站功能的实现方法
2012-10-25 10:46
281 查看
IE9测试版已经出来一段时间了,它完善了对 HTML5、CSS3 的支持,在界面上有了很大的调整,增强了安全措施,不过在这个百花齐放的时代,这些也不算什么亮点。如果要说IE9浏览器最独特的地方,估计也就是今天提到的Site Pinning(固定网站)功能了,它能够将一个网站如同程序固定在 Windows Vista 和 Windows 7 的任务栏中,并且在点击图标后显示一个相关网站的列表。对于支持此功能的网站,还能定义图标、导航按钮颜色、Jump List、Thumbnail Toolbar 等内容。我想看这篇文章的人都应该知道IE9浏览器的这个功能是什么样子了。如果你还了解这项功能,可以先阅读这篇文章:IE9网站锁定功能与Bing的结合示范。那么我们怎么让网站支持它呢?
微软提供了一系列方法使得网站支持 Site Pinning,可以参见以下两个 Demo。
通过 Meta 定义程序名称、描述、导航按钮颜色、Jump List 工作列表、起始页,请按此;
通过 JavaScript 动态定义覆盖图标、Jump List 与 Thumbnail Toolbar,请按此。
这两个 Demo 都需要使用 IE9 浏览,并将标签拖动到任务栏固定后才能观察效果。
在 网页的<head>标记内,加入如下的代码:
<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” />
<meta name=”msapplication-task” content=”name=留言;action-uri=/guestbook;icon-uri=/favicon.ico” />
<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浏览器界面上的「上一页」跟「下一页」按钮的颜色,这样我们就可以根据网站的的主色系来自动调整按钮颜色。
<meta name=”msapplication-navbutton-color” content=”颜色” />
颜色的表示法可使用颜色名称,例如要显示成黄色,就要:
<meta name=”msapplication-navbutton-color” content=”yellow” />
也可使用 16位的颜色代码:
<meta name=”msapplication-navbutton-color” content=”#0000ff” />
效果如下:
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;
}
}
微软提供了一系列方法使得网站支持 Site Pinning,可以参见以下两个 Demo。
通过 Meta 定义程序名称、描述、导航按钮颜色、Jump List 工作列表、起始页,请按此;
通过 JavaScript 动态定义覆盖图标、Jump List 与 Thumbnail Toolbar,请按此。
这两个 Demo 都需要使用 IE9 浏览,并将标签拖动到任务栏固定后才能观察效果。
一、通过 META 定义
HTML语言:在 网页的<head>标记内,加入如下的代码:
<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” />
<meta name=”msapplication-task” content=”name=留言;action-uri=/guestbook;icon-uri=/favicon.ico” />
<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浏览器界面上的「上一页」跟「下一页」按钮的颜色,这样我们就可以根据网站的的主色系来自动调整按钮颜色。
<meta name=”msapplication-navbutton-color” content=”颜色” />
颜色的表示法可使用颜色名称,例如要显示成黄色,就要:
<meta name=”msapplication-navbutton-color” content=”yellow” />
也可使用 16位的颜色代码:
<meta name=”msapplication-navbutton-color” content=”#0000ff” />
效果如下:
二、通过 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;
}
}
相关文章推荐
- 网站的下次自动登录功能的实现方法
- Android6.0 固定屏幕功能实现方法及实例
- 网站的下次自动登录功能的实现方法
- 三层交换机的路由功能固定IP地址的方法实现不同vlan之间联通
- 网站的下次自动登录功能的实现方法
- 做了一个个人网站,想实现音乐播放器功能,而且想用火狐浏览器使用,求方法!
- js实现人才网站职位选择功能的方法
- 实现网站登录、登出功能的方法和技巧
- DIV始终固定在网页右下角位置的CSS实现方法,返回顶部功能
- asp.net实现网站上传下载功能的几种方法
- asp.net实现固定GridView标题栏的方法(冻结列功能)
- shell split 功能实现方法
- 新版raspbian系统的固定IP配置和启用root账户的ssh登录功能的方法
- 标准功能模块组件 -- 名片管理组件,C\S 版本的标准用例程序,可以参考权限实现方法
- phpcms v9的表单向导实现问答咨询功能的方法
- C#编程 忘记密码功能的实现方法
- jQuery+css3实现Ajax点击后动态删除功能的方法
- jstree单选功能的实现方法