IE9在Win7下的任务栏绑定、Jumplist等功能体现了网站即应用的思想,通过增强的功能可以像传统软件一样方便的浏览、控制网站,获取消息通知,体现了以网站为中心,去浏览器中心化的发展思路。在下图里,常用的网站成为了任务栏上的一个应用图标。
![](https://box.kancloud.cn/2016-08-02_57a05bcf3d68d.gif)
而Jumplist放置网站的跳转列表,可以方便的浏览和跳转到网站的对应栏目。
![](https://box.kancloud.cn/2016-08-02_57a05bcf52168.gif)
![](https://box.kancloud.cn/2016-08-02_57a05bcf63353.gif)
任务栏覆盖图标可以显示来自网站的消息通知,例如有几封新邮件或者新的消息。
![](https://box.kancloud.cn/2016-08-02_57a05bcf7a14b.gif)
缩略图图标可以方便的控制网站上音乐、视频的播放。
![](https://box.kancloud.cn/2016-08-02_57a05bcf8d3dd.gif)
国外已经有不少网站支持了这些新特性,而国内来看Web QQ和Qzone已经或者将要提供对这些新特性的支持,剩下的国内网站支持目前还寥寥无几。下面来了解这些功能和如何开发来定制它们。
## 一、任务栏绑定
普通任务栏图标只有在程序运行时才会出现,而网站绑定到任务栏缩略图后可以像应用程序一样快速的打开定制的网站,并且浏览器关闭后仍然存在,还可以进行强大的定制。
1、尝试IE9默认的任务栏绑定功能
打开一个带favicon的本地页面,如下图所示:
![](https://box.kancloud.cn/2016-08-02_57a05bcfa4ed7.gif)
我们可以点击favicon并将它拖拽到任务栏。
![](https://box.kancloud.cn/2016-08-02_57a05bcfb815c.gif)
现在网站已经成功添加到任务栏。
![](https://box.kancloud.cn/2016-08-02_57a05bcfca73d.gif)
点击图标可以直接打开网站,同时可以看到,浏览器的前进后退按钮已经变成绿色,这是浏览器根据图标的Trackcolor自动设置的,在稍后的定制中,可以看到这个颜色是可以我们自己来设定的。
![](https://box.kancloud.cn/2016-08-02_57a05bcfdfa1d.gif)
同时在开始菜单里面可以看到此网站的应用链接。
![](https://box.kancloud.cn/2016-08-02_57a05bcff3941.gif)
我们再添加一个页面,点击右键可以看到有如下选项:
![](https://box.kancloud.cn/2016-08-02_57a05bd01281d.gif)
点击可以将此程序从任务栏解锁。
2、定制任务栏绑定功能
1)绑定到开始菜单
我们可以通过Javascript来定制我们所需的Pin功能。
在网页里添加如下代码:
![](https://box.kancloud.cn/2016-08-02_57a05bd0269f1.gif)
打开页面后,点击页面上的“添加到开始菜单”按钮,可以看到出现如下对话框:
![](https://box.kancloud.cn/2016-08-02_57a05bd039d3e.gif)
点击后此网站就会出现在开始菜单中,并且在上面点击右键可以将它绑定到任务栏。
![](https://box.kancloud.cn/2016-08-02_57a05bd050139.gif)
2) 定制图标
使用如下标签即可设定favicon图标:
![](https://box.kancloud.cn/2016-08-02_57a05bd066828.gif)
3) 定制应用程序名和提示
通过如下meta标签可以设置应用程序名和提示:
![](https://box.kancloud.cn/2016-08-02_57a05bd07b757.gif)
设置结果如下图所示:
![](https://box.kancloud.cn/2016-08-02_57a05bd08e261.gif)
4) 定制IE9前进后退按钮颜色
通过如下meta标签可以设置前进后退按钮颜色:
![](https://box.kancloud.cn/2016-08-02_57a05bd0a221c.gif)
![](https://box.kancloud.cn/2016-08-02_57a05bd0b65b2.gif)
![](https://box.kancloud.cn/2016-08-02_57a05bd0cac89.gif)
## 二、Jumplist(跳转列表)
1、通过meta标签添加Jumplist项目
可通过如下代码添加Jumplist项目:
![](https://box.kancloud.cn/2016-08-02_57a05bd0dcabd.gif)
Jumplist的效果如下图所示:
![](https://box.kancloud.cn/2016-08-02_57a05bd0eded3.gif)
2、定制Jumplist
我们可以在Jumplist里定制一个新的分类,可以放置最多12个栏目。
通过如下代码实现Jumplist定制:
![](https://box.kancloud.cn/2016-08-02_57a05bd10d7b6.gif)
实现的效果如下图所示:
![](https://box.kancloud.cn/2016-08-02_57a05bd11e24e.gif)
## 三、任务栏覆盖图标
任务栏覆盖图标非常有用,可以在图标上显示网站的最新消息。
例如通过如下代码,我们可以为默认图标上叠加一张覆盖图标。
![](https://box.kancloud.cn/2016-08-02_57a05bd132870.gif)
下面是添加之前的图标、被添加的图标和添加之后的图标:
![](https://box.kancloud.cn/2016-08-02_57a05bd145568.gif)
![](https://box.kancloud.cn/2016-08-02_57a05bd157f44.gif)
![](https://box.kancloud.cn/2016-08-02_57a05bcf7a14b.gif)
这样我们可以通过Ajax获取更新后控制图标的显示,例如Web QQ网站显示最新消息数量、微博显示最新评论数量这样的场景。很可惜,覆盖图标不支持像css3一样的多背景叠加和位置控制,所以无法直接通过多幅数字图片叠加显示消息数量,这儿提供三种思路。
1)通过一个图标提示有新的消息,不显示具体数量。
2)限制消息数量,例如十条以下的消息分别通过九张图片提示,十条消息以上时通过一张固定的图片进行提示,类似于MSN的显示方式:![](https://box.kancloud.cn/2016-08-02_57a05bd1792b0.gif)
。
3)后台根据消息数量动态生成图片,可以使用GD、Imagemagick等图片库。msSiteModeSetIconOverlay支持从网络请求图片,例如下图就是直接请求百度的favicon![](https://box.kancloud.cn/2016-08-02_57a05bd18b50c.gif)
。
四、任务栏缩略图
我们可以通过任务栏缩略图标对页面进行控制,例如控制影片的播放和暂停。
下面我们先添加一段视频到页面中。
![](https://box.kancloud.cn/2016-08-02_57a05bd19e5a7.gif)
然后添加控制的代码:
![](https://box.kancloud.cn/2016-08-02_57a05bd1b1a8d.gif)
打开页面,可以看到视频已经加载。
![](https://box.kancloud.cn/2016-08-02_57a05bd1ccdd5.gif)
将鼠标放在任务栏对应网站的图标,可以看到播放控制按钮:
![](https://box.kancloud.cn/2016-08-02_57a05bd1ec813.gif)
点击播放按钮即可播放视频。
![](https://box.kancloud.cn/2016-08-02_57a05bd20bbf7.gif)
任务栏图标已经变成暂停的样式。
![](https://box.kancloud.cn/2016-08-02_57a05bd21f081.gif)
通过此API,我们能实现更加强大和个性化的功能。例如下图所示的媒体播放器功能:
![](https://box.kancloud.cn/2016-08-02_57a05bd23101c.gif)
综上所述,IE9提供了强大的网站控制功能和Win7的完美结合,我们能利用它开发出更加酷炫和强大的网站体验,希望国内有越来越多的网站支持这些特性。以上使用到的API都可以msdn([http://msdn.microsoft.com/zh-cn/library/default.aspx](http://msdn.microsoft.com/zh-cn/library/default.aspx))里查阅到。
最后show一下IE9的贴纸和Win7的水杯。
![](https://box.kancloud.cn/2016-08-02_57a05bd243aa1.gif)
![](https://box.kancloud.cn/2016-08-02_57a05bd25a216.gif)
- 前言
- AutoPager的简单实现
- 利用CSS3特性巧妙实现漂亮的DIV箭头
- IE9在Win7下任务栏新特性简介
- 浏览器九宫格的简单实现
- Raphael js库简介
- 使用CSS3构建Ajax加载动画
- 用CSS3创建动画价格表
- 用CSS3实现浏览器的缩放功能
- 用纯CSS3实现QQ LOGO
- 用CSS3创建旋转载入器
- 使用Javascript开发移动应用程序
- 用HTML5创建超酷图像灰度渐变效果
- 使用CSS3创建文字颜色渐变(CSS3 Text Gradient)
- 仅用CSS创建立体旋转幻灯片
- 如何创建跨浏览器的HTML5表单
- 用CSS3实现动画进度条
- HTML5 Guitar Tab Player
- 奇妙的HTML5 Canvas动画实例
- 谈HTML5和CSS3的国际化支持
- 实现跨浏览器的HTML5占位符
- 前端开发必备工具:WhatFont Bookmarklet-方便的查询网页上的字体
- 使用HTML5和CSS3来创建幻灯片
- HTML5之美
- 如何使用HTML5创建在线精美简历
- 以小见大、由浅入深-谈如何面试Javascript工程师
- 快速入门:HTML5强大的Details元素
- 用CSS3实现图像风格
- HTML5视频字幕与WebVTT
- 用纯CSS3实现Path华丽动画
- 用3个步骤实现响应式网页设计
- 遇见CSS3滤镜
- 关于CSS3滤镜的碎念
- 用纯CSS3绘制萌系漫画人物动态头像
- CSS3新的鼠标样式介绍
- 用HTML5献上爱的3D玫瑰
- 对HTML5 Device API相关规范的解惑
- 如何使用HTML5实现拍照上传应用
- 2012第一季度国外HTML5移动开发趋势
- HTML5新特性:范围样式
- 百度开发者大会-《用HTML5新特性开发移动App》PPT分享
- Chrome 19对于HTML5最新支持的动态:电池状态API,全屏API,震动API,语音API
- 遇见Javascript类型数组(Typed Array)
- 用HTML5 Audio API开发游戏音乐
- 用HTML5实现人脸识别
- 用Javascript实现人脸美容
- Chrome 20对于HTML5最新支持的动态:颜色输入,网络信息API,CSS着色器
- 用HTML5实现手机摇一摇的功能
- 用HTML5实现iPad应用无限平滑滚动
- 用非响应式设计构建跨端Web App
- 了解SVG
- HTML5图像适配介绍
- HTML5安全:内容安全策略(CSP)简介
- HTML5安全:CORS(跨域资源共享)简介
- 用CSS3 Region和3D变换实现书籍翻页效果
- 谈谈移动App的思维误区
- Chrome新特性:文件夹拖拽支持
- 《关注HTML5安全》
- HTML5安全风险详析之一:CORS攻击
- HTML5安全风险详析之二:Web Storage攻击
- HTML5图像适配最新进展:响应式图片规范草案
- HTML5移动Web App相关标准状态及路线图
- HTML5安全风险详析之三:WebSQL攻击
- Chrome引入WebRTC支持视频聊天App
- HTML5安全风险详析之四:Web Worker攻击
- HTML5安全风险详析之五:劫持攻击
- HTML5安全风险详析之六:API攻击
- HTML5安全攻防详析之七:新标签攻击
- 在iOS Safari中播放离线音频
- 使用WebRTC实现远程屏幕共享
- Firefox、Android、iOS遇见WebRTC
- HTML5光线传感器简介
- HTML5安全攻防详析之八:Web Socket攻击
- HTML5安全攻防详析之完结篇:HTML5对安全的改进
- 激动人心!在网页上通过语音输入文字 - HTML5 Web Speech API介绍
- Web滚动性能优化实战
- 用CSS3设计响应式导航菜单
- 用HTML5构建高性能视差网站
- 漫谈@supports与CSS3条件规则
- HTML5下载属性简介
- 如何开发优秀的HTML5游戏?-迪斯尼《寻找奥兹之路》游戏技术详解(一)
- 如何开发优秀的HTML5游戏?-迪斯尼《寻找奥兹之路》游戏技术详解(二)
- 趋势:Chrome为打包应用提供强大新特性
- 从HTML5移动应用现状谈发展趋势
- 基于HTML5的Web跨设备超声波通信方案