当前位置: 首页 > 设计 > 正文
avatar

我们可以直接将IE9的选项卡拖动到开始栏上,让其成为一个按钮,下次访问时就可以直接双击这个按钮来启动这个网页“程序”(Application),这也被称为“固定网站”功能,是不是很方便呢。

淘宝网有着国内数一数二的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=http://www.weisay.com/blog/about;icon-uri=http://www.weisay.com/favicon.ico" />
<meta name="msapplication-navbutton-color" content="#db0b0b" />
<link rel="shortcut icon" href="http://www.weisay.com/favicon2.ico" type="image/x-icon" />
<![endif]-->

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

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

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

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

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

  1. avatar
    27楼
    下午茶 Internet Explorer Windows

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

    2011-05-17 23:53 [回复]
    • avatar
      William Internet Explorer Windows

      额,IE6 ~~~古董啊

      2011-05-22 01:02 [回复]
  2. avatar
    26楼
    憨豆先生 Internet Explorer Windows

    还是喜欢用Google Chrome 浏览器

    2011-05-06 04:39 [回复]
    • avatar
      William Internet Explorer Windows

      我喜欢FireFox~

      2011-05-22 01:01 [回复]
  3. avatar
    25楼
    绿子弹 Mozilla Firefox Windows

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

    2011-04-19 21:31 [回复]
    • avatar
      William Internet Explorer Windows

      还好吧,兼容性还是比较高的

      2011-05-22 01:01 [回复]
  4. avatar
    24楼
    reizhi Google Chrome Windows

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

    2011-04-18 23:59 [回复]
    • avatar
      William Internet Explorer Windows

      也不是,貌似现在的Google的外链图有些问题,被墙了

      2011-04-19 00:18 [回复]
  5. avatar
    23楼
    莱步淘淘网 Mozilla Firefox Windows

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

    2011-04-18 16:06 [回复]
  6. avatar
    22楼
    西风 Internet Explorer Windows

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

    2011-04-17 22:23 [回复]
    • avatar
      William Maxthon Windows

      用的WP Thread Comment这个插件~

      2011-04-18 16:55 [回复]
  7. avatar
    21楼
    阿德 Internet Explorer Windows

    哈哈,换皮了。。不错哈

    2011-04-17 22:22 [回复]
    • avatar
      William Maxthon Windows

      一般般吧,WordPress的主题制作才刚刚起步~

      2011-04-18 16:57 [回复]
  8. avatar
    20楼
    木本无心 Safari Windows

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

    2011-04-17 20:04 [回复]
    • avatar
      William Maxthon Windows

      是么。呵呵,不甚荣幸~

      2011-04-18 16:54 [回复]
  9. avatar
    19楼
    七七 Internet Explorer Windows

    没用过,有机会试试!

    2011-04-17 13:53 [回复]
  10. avatar
    18楼
    海天 Google Chrome Windows

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

    2011-04-16 20:34 [回复]
    • avatar
      William Maxthon Windows

      IE9的功能还是比较多的,有些没有用到而已

      2011-04-18 16:53 [回复]
  11. avatar
    17楼
    逝魂 Mozilla Firefox Windows

    现在chrome为主 ie也是经常用

    2011-04-16 16:10 [回复]
    • avatar
      William Maxthon Windows

      我喜欢FireFox更多一些~

      2011-04-18 16:52 [回复]
  12. avatar
    16楼
    木本无心 Google Chrome Windows

    可惜看不到图诶。。

    2011-04-16 15:38 [回复]
    • avatar
      William Maxthon Windows

      额,我用Google的外链~

      2011-04-18 16:52 [回复]
  13. avatar
    15楼
    混子 Mozilla Firefox Windows

    小子IE9玩的很熟练么

    2011-04-16 12:05 [回复]
    • avatar
      William Maxthon Windows

      必须的~

      2011-04-18 16:51 [回复]
  14. avatar
    14楼
    Jungle Google Chrome Windows

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

    2011-04-16 01:56 [回复]
    • avatar
      William Maxthon Windows

      你貌似很反感IE系列啊,话说我只比较反感IE6~其他的还行

      2011-04-18 16:51 [回复]
  15. avatar
    13楼
    任侠 Mozilla Firefox Windows

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

    2011-04-15 21:58 [回复]
    • avatar
      William Maxthon Windows

      你木有用Win7,呵呵

      2011-04-18 16:50 [回复]
  16. avatar
    12楼
    雅岚 Mozilla Firefox Windows

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

    2011-04-15 16:08 [回复]
    • avatar
      William Maxthon Windows

      呵呵,我还是常用IE的~

      2011-04-15 17:13 [回复]
  17. avatar
    11楼
    阿鼎 Google Chrome Windows

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

    2011-04-14 23:35 [回复]
    • avatar
      William Maxthon Windows

      总要向前看嘛~IE6必然是淘汰的~

      2011-04-15 17:12 [回复]
  18. avatar
    10楼
    太子虹 Internet Explorer Windows

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

    2011-04-14 21:09 [回复]
  19. avatar
    9楼
    wmtimes Google Chrome Windows

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

    2011-04-14 20:21 [回复]
    • avatar
      William Maxthon Windows

      其实更多的只是自己玩玩~

      2011-04-15 17:11 [回复]
      • avatar
        jacksuc Google Chrome Windows

        你最近怎么不去我那儿溜达了,以往你可都是占头排的。

        2011-04-15 21:06 [回复]
  20. avatar
    8楼
    西风 Internet Explorer Windows

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

    2011-04-14 20:11 [回复]
    • avatar
      William Maxthon Windows

      是的,叫加个代码,然后做个ico图标~

      2011-04-15 17:11 [回复]
  21. avatar
    7楼
    Prouz Google Chrome Windows

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

    2011-04-14 16:32 [回复]
    • avatar
      William Maxthon Windows

      其实也就自己玩玩,效果还是不错的,那些大站使用这个好,人家直接把网站绑定在开始栏上,方便~

      2011-04-14 18:03 [回复]
  22. avatar
    6楼
    龙城瓶子 Google Chrome Windows

    么有win7
    更么有IE9。。。

    2011-04-14 12:45 [回复]
    • avatar
      William Maxthon Windows

      装个就有了啊,哈哈

      2011-04-14 16:08 [回复]
  23. avatar
    5楼
    Louis Han Mozilla Firefox Windows

    可惜不用IE

    2011-04-14 10:48 [回复]
    • avatar
      William Maxthon Windows

      一点也不用IE?肯定或多或少用的到的

      2011-04-14 16:10 [回复]
  24. avatar
    4楼
    wusx Internet Explorer Windows

    动作很迅速啊

    2011-04-13 23:42 [回复]
    • avatar
      William Maxthon Windows

      已经慢了~嘿嘿

      2011-04-14 16:08 [回复]
  25. avatar
    地板
    林肆 Internet Explorer Windows

    IE9这么强大~哈哈~

    2011-04-13 23:00 [回复]
    • avatar
      William Internet Explorer Windows

      IE9其实也很好的,只是一些人抱着传统的思想去看待她。

      2011-04-13 23:05 [回复]
  26. avatar
    板凳
    下载.de Mozilla Firefox Windows

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

    2011-04-13 22:44 [回复]
    • avatar
      William Internet Explorer Windows

      IE9的新特性不止这些的,有些还没有发掘出来。

      2011-04-13 23:05 [回复]
  27. avatar
    沙发
    世纪预言 Internet Explorer Windows

    第一次抢到沙发。

    2011-04-13 22:34 [回复]
    • avatar
      William Internet Explorer Windows

      我博客的沙发还是很容易坐的~

      2011-04-13 22:39 [回复]

发表评论

question razz sad smile redface biggrin surprised eek confused cool lol mad rolleyes wink neutral cry

快捷键:Ctrl+Enter