如何让你的网站支持IE9 Pinned Site

石忠

该如何展示 IE9 Pinned Site 呢？我可以写一个新的应用，完全是为了展示 Pinned Site 的特性，但这样就像是为了实现这些特性而利用这些特性。因此我想还是升级一个现有的网站好了，这样更能说明 Pinned Site 是如何起到优化用户体验的作用的。
    我选择了 hack 现在的百度地图。因为 IE9 正式版还没有发布，因此我 hack 的代码暂时也不能发布到线上，只能私下玩玩。在这里，我选择使用 Fiddler 来替换百度地图首页代码，从而实现 hack 的效果。
    添加静态信息
    添加静态信息是最容易的，只要写几个 meta 标签就可以了。那么我们就把百度地图的相关信息填充上去吧。“任务”里面放什么链接呢？考虑到用户使用地图，通常就是搜索几类信息：地点、公交、驾车、周边，我们就把这几类搜索的快速入口链接放上去吧。不过，因为百度地图本身没有实现这几个快速入口的地址，因此我们需要在 JavaScript 里面实现一些小 trick 。
    <meta name="application-name"
    content="百度地图" />
    <meta name="msapplication-tooltip"
    content="使用百度地图浏览地图、搜索地点、查询公交驾车线路" />
    <meta name="msapplication-window"
    content="width=1024;height=768" />
    <meta name="msapplication-task"
    content='name=搜索；
    action-uri=./#json={"type":"poi"};
    icon-uri=/favicon.ico' />
    <meta name="msapplication-task"
    content='name=公交；
    action-uri=./#json={"type":"bus"};
    icon-uri=/favicon.ico' />
    <meta name="msapplication-task"
    content='name=驾车；
    action-uri=./#json={"type":"drive"};
    icon-uri=/favicon.ico' />
    <meta name="msapplication-task"
    content='name=附近；
    action-uri=./#json={"type":"circle"};
    icon-uri=/favicon.ico' />
    <meta name="msapplication-navbutton-color"
    content="#2319DC" />
    <meta name="msapplication-starturl"
    content="./" />
    我选择的 trick 时，在百度地图首页地址后面加上一个锚点，锚点内含一个 JSON ，用里面的信息表明使用哪个分类搜索。在文章的后面会说明如何用利用 JavaScript 识别 JSON 然后做相应的处理，在这里我就不做解释了。
    加入了上述信息后，当我们把百度地图固定到任务栏上，就能看到对应的图标和 Jump List 。[netxpage]
    添加动态信息
    接下来我们要添加动态信息。百度地图适合添加什么样的动态信息呢？考虑到用户可能经常需要搜索相同或相似的路线，我们可以把用户的搜索记录保存下来，并放到 Jump List 的一个名为“历史记录”的分类里面。
    要实现这样一个分类，首先要记录用户点击“百度一下”进行搜索时文本框内的信息，然后再把这些信息写到 Jump List 里面去。先看看如何捕获用户点击“百度一下”按钮的事件吧。
    $（'#form1'）。submit（function （） {
    var historyItem = {
    'type': 'poi',
    'word': $（'#PoiSearch'）。val（）
    };
    addHistoryItem（historyItem）；
    updateJumpList（）；
    }）；
    我们监听表单的提交事件，然后把搜索类型和文本框内的信息保存到一个 JSON 里，然后把 JSON 存到 localStorage ，最后更新 Jump List 。如何把 JSON 保存到 localStorage ，以及在将来从 localStorage 中取回 JSON ，这些都不属于本文的话题，大家可以看看资源下载一节的源代码，这里就不展开讨论了。我们关注的是如何将 JSON 中的数据添加到 Jump List 中去。
    var updateJumpList = function （） {
    var history = loadHistory（）；
    try { /* try is for IE9 beta only and RTM will change */
    if （window.external.msIsSiteMode（）） {
    window.external.msSiteModeClearJumpList（）；
    if （history.length > 0） {
    window.external.msSiteModeCreateJumpList（'历史记录'）；
    }
    for （var i = 0; i < history.length; i++） {
    var historyItem = history;
    switch （historyItem.type） {
    case 'poi':
    window.external.msSiteModeAddJumpListItem（
    '搜索' + historyItem.word,
    'http://map.baidu.com/#json=' +
    JSON.stringify（historyItem），
    'http://map.baidu.com/favicon.ico'）；
    break;
    }
    }
    window.external.msSiteModeShowJumpList（）；
    } else {
    /* it’s not in side mode */
    }
    } catch （e） { console.dir（e）； }
    };
    我们把历史记录读取出来，然后检查现在是否在 IE9 中，再检查现在是否在 Site Mode 中（也就是用户已经把站点固定到任务栏了）。因为 IE9 Beta 的缺陷，无法通过特性检查来得知浏览器是否支持 Site Mode ，因此需要使用 try catch 模式，这将在正式版中修复。
    接下来，我们遍历历史记录，根据类型信息组合 Jump List 项目的文本信息和地址，然后把项目添加到 Jump List 上。地址的做法同样是使用锚点加 JSON ，到底这个 JSON 在页面打开时是如何解释的，请大家看资源下载一节的源代码吧，我就不浪费篇幅解释了。