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

如今岁月安好

如今岁月安好

2016-03-31 18:11

下面是个超简单的IE9浏览器固定网站功能的实现方法教程,图老师小编精心挑选推荐,大家行行好,多给几个赞吧,小编吐血跪求~

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

 

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

一、通过 Meta 定义

HTML语言:

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/liulanqijianrong/)

在 网页的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等等

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/liulanqijianrong/)

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" /

效果如下:

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

二、通过 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;
}
}

 

展开更多 50%)
分享

猜你喜欢

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

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

IE9固定网站功能的使用经验

浏览器
IE9固定网站功能的使用经验

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

IE9浏览器给我更多常用网站

浏览器
IE9浏览器给我更多常用网站

IE9浏览器的功能由你定

浏览器
IE9浏览器的功能由你定

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

IE9浏览器完全卸载的方法

浏览器
IE9浏览器完全卸载的方法

IE9浏览器单一框的功能演示

浏览器
IE9浏览器单一框的功能演示

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

win10mobile 10536 安装错误怎么办

win10mobile 10536 安装错误怎么办

钉钉忘记密码如何操作?

钉钉忘记密码如何操作?
下拉加载更多内容 ↓