利用IE9固定网站功能将网页变成桌面应用程序-威言威语

利用IE9固定网站功能将网页变成桌面应用程序

William2011-04-13 21:53设计15,553次阅读52条评论

扫一扫手机看

淘宝网有着国内数一数二的UED团队，所以淘宝的前端是很强悍的，在很多细节方面他们都追求至善至美。

今天的说的这个效果最初是在淘宝上看到的。

随着IE9的推出，浏览器又掀起一番大战，除了IE9利用图形显卡加速这一特性外，还有什么值得我们关注的呢？看到这里，聪明的你肯定想到那就是IE9的将网页转变为桌面应用的功能，的确，我们可以直接将选项卡拖动到开始栏上，让其成为一个按钮，下次访问时就可以直接双击这个按钮来启动这个网页“程序”，这也被称为“固定网站”功能，是不是很方便呢？微软推出一些特定的meta元标签来让网页开发者自己定制应用程序的行为，让我们看看都有哪些功能吧。

通过 MSDN上的介绍我们知道可供定制的主要有：

•设置固定网站的起始页

•指定当鼠标指针悬停在任务栏和桌面上的固定网站按钮上时出现的工具提示文本

•限制浏览器窗口的初始大小

•自定义固定网站浏览器窗口中“后退”和“前进”按钮的颜色

•向跳转列表添加静态任务

如bing.com的实例。

<meta content="Bing" name="application-name" /><!--指定应用程序的标题-->
<meta content="Bing" name="msapplication-tooltip" /><!--指定tooltip，当鼠标悬停在选项卡或图标时出现-->
<meta content="width=1024;height=768" name="msapplication-window" /><!--指定初始网站的大小，每次打开将处于这样的大小下-->
<meta content="/" name="msapplication-starturl" /><!--浏览器后退和前进按钮的颜色-->

淘宝的那种就多了点内容，结合了Windows 7的Jump List功能的导航，显得更加的个性。

<!--[if IE 9 ]>
<meta name="application-name" content="淘宝网 - 淘！我喜欢" />
<meta name="msapplication-tooltip" content="淘宝网 - 淘！我喜欢" />
<meta name="msapplication-task" content="name=淘宝商城;action-uri=http://www.tmall.com/;icon-uri=http://img02.taobaocdn.com/tps/i2/T1bZNxXjXjXXXXXXXX.png" />
<meta name="msapplication-task" content="name=聚划算;action-uri=http://ju.taobao.com/index.htm;icon-uri=http://www.taobao.com/favicon.ico" />
<meta name="msapplication-task" content="name=登录;action-uri=https://login.taobao.com/member/login.jhtml;icon-uri=http://www.taobao.com/favicon.ico" />
<meta name="msapplication-navbutton-color" content="#FF6600" />
<link rel="shortcut icon" href="http://www.taobao.com/favicon2.ico" type="image/x-icon" />
<![endif]-->

我自己的内容并没有淘宝的多，我只加了一个“关于”。

<!--[if IE 9 ]>
<meta name="application-name" content="威言威语" />
<meta name="msapplication-tooltip" content="威言威语" />
<meta name="msapplication-task" content="name=关于;action-uri=/blog/about;icon-uri=/favicon.ico" />
<meta name="msapplication-navbutton-color" content="#db0b0b" />
<link rel="shortcut icon" href="/favicon2.ico" type="image/x-icon" />
<![endif]-->

大家不难看出content后面指示了每个Item项目的配置，其中name代表显示的名称，action-uri代表跳转的地址，icon-uri代表前面的小图标地址，怎么样是不是很容易？

当然了小图标ico的自己去做一个，这一个图标得包含32px和16px两个大小，这样在地址栏上显示16px的，而在开始栏上显示32px的那个图标。如我网站的favicon2.ico就是这样的，我是用IconWorkshop做的，比较简单，大家也可以试试。

如果想深入研究的话建议参考微软的MSDN文档《固定网站开发人员文档》。

本文固定链接: https://www.weisay.com/blog/use-ie9-change-page-to-application.html | 威言威语

利用IE9固定网站功能将网页变成桌面应用程序：目前有 52 条评论

27楼
下午茶：

ie9都出了，我还在用ie6呢。。。

2011-05-17 23:53 回复
- William博主：
  
  @下午茶额，IE6 ~~~古董啊
  
  2011-05-22 01:02 回复
26楼
憨豆先生：

还是喜欢用Google Chrome 浏览器

2011-05-06 04:39 回复
- William博主：
  
  @憨豆先生我喜欢FireFox~
  
  2011-05-22 01:01 回复
25楼
绿子弹：

受教了，只是ie9有些网站不兼容，呵呵

2011-04-19 21:31 回复
- William博主：
  
  @绿子弹还好吧，兼容性还是比较高的
  
  2011-05-22 01:01 回复
24楼
reizhi：

刷了好几遍图都没出来，唉网络真差

2011-04-18 23:59 回复
- William博主：
  
  @reizhi也不是，貌似现在的Google的外链图有些问题，被墙了
  
  2011-04-19 00:18 回复
23楼
莱步淘淘网：

这个东西没试过，新模版感觉还可以

2011-04-18 16:06 回复
22楼
西风：

你这主题很给力啊
我很噶
你这个评论回复用的是什么插件呢？

2011-04-17 22:23 回复
- William博主：
  
  @西风用的WP Thread Comment这个插件~
  
  2011-04-18 16:55 回复
21楼
阿德：

哈哈，换皮了。。不错哈

2011-04-17 22:22 回复
- William博主：
  
  @阿德一般般吧，WordPress的主题制作才刚刚起步~
  
  2011-04-18 16:57 回复
20楼
木本无心：

换主题啦，为什么你换的主题我都很喜欢嘞。

2011-04-17 20:04 回复
- William博主：
  
  @木本无心是么。呵呵，不甚荣幸~
  
  2011-04-18 16:54 回复
19楼
七七：

没用过，有机会试试！

2011-04-17 13:53 回复
18楼
海天：

呵呵 IE9也出这个功能了啊呵呵

2011-04-16 20:34 回复
- William博主：
  
  @海天IE9的功能还是比较多的，有些没有用到而已
  
  2011-04-18 16:53 回复
17楼
逝魂：

现在chrome为主 ie也是经常用

2011-04-16 16:10 回复
- William博主：
  
  @逝魂我喜欢FireFox更多一些~
  
  2011-04-18 16:52 回复
16楼
木本无心：

可惜看不到图诶。。

2011-04-16 15:38 回复
- William博主：
  
  @木本无心额，我用Google的外链~
  
  2011-04-18 16:52 回复
15楼
混子：

小子IE9玩的很熟练么

2011-04-16 12:05 回复
- William博主：
  
  @混子必须的~
  
  2011-04-18 16:51 回复
14楼
Jungle：

谷歌与支付宝宣布达成合作了，taobao支付宝数字证书兼容CHROME。
IE以后绝少用到了。

2011-04-16 01:56 回复
- William博主：
  
  @Jungle你貌似很反感IE系列啊，话说我只比较反感IE6~其他的还行
  
  2011-04-18 16:51 回复
13楼
任侠：

看完后我兴致勃勃地跑去下载了IE9，一运行却报错装不了，原来这斯不支持XP！真够BT的

2011-04-15 21:58 回复
- William博主：
  
  @任侠你木有用Win7，呵呵
  
  2011-04-18 16:50 回复
12楼
雅岚：

很少用IE的妖女岚白衣飘过。。。。

2011-04-15 16:08 回复
- William博主：
  
  @雅岚呵呵，我还是常用IE的~
  
  2011-04-15 17:13 回复
11楼
阿鼎：

很好看的嘛，不过，国内IE6占主导，，，，，诶。。。

2011-04-14 23:35 回复
- William博主：
  
  @阿鼎总要向前看嘛~IE6必然是淘汰的~
  
  2011-04-15 17:12 回复
10楼
太子虹：

没用过，都不知道了，呵呵

2011-04-14 21:09 回复
9楼
wmtimes：

如果下面一大串那也不太好看。还是输地址吧，也不是很长

2011-04-14 20:21 回复
- William博主：
  
  @wmtimes其实更多的只是自己玩玩~
  
  2011-04-15 17:11 回复
  - jacksuc：
    
    @William你最近怎么不去我那儿溜达了，以往你可都是占头排的。
    
    2011-04-15 21:06 回复
8楼
西风：

我怎么没看出来怎么搞就添加代码吗？

2011-04-14 20:11 回复
- William博主：
  
  @西风是的，叫加个代码，然后做个ico图标~
  
  2011-04-15 17:11 回复
7楼
Prouz：

这个我很早就研究过了，IE9测试版刚出的时候，介绍里有说，但是没研究过怎么回事，当时看新浪微博做的那个很好~~我一直用IE9把他固定在那里的。
可惜后来IE9老是崩溃，弄得我也崩溃了，转用Chrome了~~~
哈~不过IE9我还有，回去测试一下这个，貌似挺好玩的！

2011-04-14 16:32 回复
- William博主：
  
  @Prouz其实也就自己玩玩，效果还是不错的，那些大站使用这个好，人家直接把网站绑定在开始栏上，方便~
  
  2011-04-14 18:03 回复
6楼
龙城瓶子：

么有win7
更么有IE9。。。

2011-04-14 12:45 回复
- William博主：
  
  @龙城瓶子装个就有了啊，哈哈
  
  2011-04-14 16:08 回复
5楼
Louis Han：

可惜不用IE

2011-04-14 10:48 回复
- William博主：
  
  @Louis Han一点也不用IE？肯定或多或少用的到的
  
  2011-04-14 16:10 回复
4楼
wusx：

动作很迅速啊

2011-04-13 23:42 回复
- William博主：
  
  @wusx已经慢了~嘿嘿
  
  2011-04-14 16:08 回复
地板
林肆：

IE9这么强大~哈哈~

2011-04-13 23:00 回复
- William博主：
  
  @林肆IE9其实也很好的，只是一些人抱着传统的思想去看待她。
  
  2011-04-13 23:05 回复
板凳
下载.de：

这个就是IE9新特性中为数不多值得称赞的啦

2011-04-13 22:44 回复
- William博主：
  
  @下载.deIE9的新特性不止这些的，有些还没有发掘出来。
  
  2011-04-13 23:05 回复
沙发
世纪预言：

第一次抢到沙发。

2011-04-13 22:34 回复
- William博主：
  
  @世纪预言我博客的沙发还是很容易坐的~
  
  2011-04-13 22:39 回复