IE9固定网站模式II:网站转变为桌面应用

    【IT168 厂商稿】通过上一期的博客,相信大家已经对IE9的固定网功能有了一定的了解,也已经知道了高清图标,静态跳转列表以及动态跳转列表的实现方法。

  接下来,我将会介绍两个更炫更酷的固定网功能给大家——自定义图标覆盖和智能缩略图功能。

  IE固定网站模式总共包括五项功能

  v 基础功能

  •   · 高清图标
  •   · 静态跳转列表

  v 高级功能

  •   · 动态跳转列表
  •   · 自定义图标覆盖
  •   · 智能缩略图

  自定义图标覆盖

  让用户注意到最新的及时提醒

  自定义图标覆盖功能使得网站能够向用户发送即时消息提醒。具体效果如下图所示:

 

  Figure 2 无覆盖固定图标

 

  Figure 3 显示覆盖的固定图标

  试想一下,如果我们的站点以这样的方式来提醒用户,如收件箱,交易信息,以及一些即时信息,将无疑会提高用户粘性和停留时间。国外网站Huffington Post的调查结果显示使用固定网功能的用户的站点停留时间上升了49%。而添加自定义图标覆盖功能也非常的简单。

  代码实现

  window.external.msSiteModeSetIconOverlay()

  window.external.msSiteModeActivate()

  window.external.msIsSiteMode()

  window.external.msSiteModeClearIconOverla()

  为了实现自定义图标覆盖通知功能,你需要下面的准备

  •   网站的个性化高清图标
  •   一系列的覆盖图标,我们推荐16×16

  API基于JavaScript, 我们将会用到以下函数

  window.external.msSiteModeClearIconOverlay()函数用来清除之前存在的覆盖图标

  window.external.msSiteModeSetIconOverlay()函数可以使得我们制定提醒的名称或简单描述

  之后,我们通过window.external.msSiteModeActivate 函数来呼出覆盖图标通知用户window.external.msIsSiteMode 函数将会告诉我们当前访问页是否是一个已经固定的网站用以决定之前的函数是否需要执行。下面的示例中,我采用了5个覆盖图标(1-5)来代表当前用户的未读消息数目。

  我们需要做的第一件事就是添加跳转到图标的链接,如果这一步缺失的话,IE浏览器的图标将会备用为默认值。

  接下来,我将要定义一些示例数据。我打算在 这个示范中让覆盖图标每隔5秒变化一次用以模仿一个较为真实的场景,这些数据元素数据仅仅简单的包括一些JSON数据。

#div_code img{border:0px;}

<!–

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

–> myPin.init([{ "num": 1, "label": "Label 1" },

  { "num": 2, "label": "Label 2" },

  { "num": 3, "label": "Label 3" },

  { "num": 4, "label": "Label 4" },

  { "num": 5, "label": "Label 5" }

  ]);

转载请注明:2019年马会全年资料_四肖三期必開 » IE9固定网站模式II:网站转变为桌面应用

喜欢 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址