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

这两个 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 耶)。

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

(0)

相关推荐

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

    第1步: 制定个性化的IE9外观 HuffPost定义了IE9的导航按钮颜色、主页、窗口大小和工具提示,这些都是“固定网站”的支持代码 。让用户访问他们喜爱的网站时候看到网站的独特性。 第2步: 让你 ...

  • win7 64位系统无法使用银行网银怎么办? IE9浏览器无法使用农业银行网银的解决方法

    故障分析: 可能是由于操作不当引起的. 解决方法: 1.首先在win7系统中装有“中国农业银行网上银行证书工具软件”: 2.插上网银并在“开始”中找到并打开“中国农业银行网上银行证书工具软件”, 点击 ...

  • iPhone6 safari浏览器翻译网页功能与使用方法详解

    对于iPhone6手机用户来说,在使用Safari来访问浏览网页的过程中,如果遇到不懂得的词语时需要怎么办呢?对于这个问题苹果官方在Safari浏览器中提供了翻译功能,用户通过该功能即可任意对网页中的 ...

  • iPhone6 safari浏览器翻译网页功能与使用方法

    操作方法: 1.首先用户在苹果手机中找到[Safari]浏览器(有些用户的Safari浏览器位置有所修改,用户请视情况而定;),在浏览器中打开网页,在网页中找到你需要翻译词语,长按选取网页中的文字,然 ...

  • IE9浏览器无法播放Flash的解决方法

    很多人会遇到关于InternetExplorer9上Flash内容无法播放的问题.网页会弹出升级Flash插件的提示:而升级Flash插件后刷新页面却仍然弹出之前的升级提示. 步骤/方法 01 首先, ...

  • IE9浏览器中无法播放Flash解决方法

    教程首先,我们先检查一下Flash插件(ShockwaveFlashObject)是否被禁用了。 在IE9页面右上角单击按钮,打开“管理加载项”。 查看一下ShockwaveFlashObject的状 ...

  • 如何将IE9浏览器网站固定到Win7开始菜单

    微软科技产品已经融入我们的生活,比如大家熟悉的IE9浏览器和Win7系统,它们之所以密不可分不仅因为IE9浏览器只能在Win7以及更高的版本的Windows系统中使用,更重要的是IE9浏览器与Win7 ...

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

    下面让我们来看看IE9的单一框还有哪些实用的功能。 智能导航 IE9 Beta除了常规输入网址来访问网站外,还支持一些大型网站的关键字智能匹配访问,即只需在单一框里输入网址的主体部分然后回车就可以自动 ...

  • 细数IE9浏览器的十大优点

    据国外媒体报道,美国著名IT网站eWeek撰文称,人人都应该试用一下微软IE9浏览器,不管他们以前使用了哪种浏览器:微软以前的浏览器只征服了一部分人,而现在的IE9浏览器值得每个人使用.以下为eWee ...