首页 > 课堂 > 浏览器 > 正文

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

2020-05-22 13:27:16
字体:
来源:转载
供稿:网友

 

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

一、通过 Meta 定义

HTML语言:

在 网页的<head>标记内,加入如下的代码:

<meta name="application-name" content="IE9 Test" />

<meta name="msapplication-tooltip" content="Rays 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" />

效果如下:

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

 

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表