如何让你的网站支持 IE9 Pinned Site (Part 2 - 实战)

该如何展示 IE9 Pinned Site 呢？我可以写一个新的应用，完全是为了展示 Pinned Site 的特性，但这样就像是为了实现这些特性而利用这些特性。所以我想还是升级一个现有的网站好了，这样更能说明 Pinned Site 是如何起到优化用户体验的作用的。

我选择了 hack 现在的百度地图。由于 IE9 正式版还没有发布，所以我 hack 的代码暂时也不能发布到线上，只能私下玩玩。在这里，我选择使用 Fiddler 来替换百度地图首页代码，从而实现 hack 的效果。

添加静态信息

添加静态信息是最容易的，只要写几个 meta 标签就可以了。那么我们就把百度地图的相关信息填充上去吧。“任务”里面放什么链接呢？考虑到用户使用地图，通常就是搜索几类信息：地点、公交、驾车、周边，我们就把这几类搜索的快速入口链接放上去吧。不过，由于百度地图本身没有实现这几个快速入口的地址，所以我们需要在 JavaScript 里面实现一些小 trick 。

我选择的 trick 时，在百度地图首页地址后面加上一个锚点，锚点内含一个 JSON ，用里面的信息表明使用哪个分类搜索。在文章的后面会说明如何用利用 JavaScript 识别 JSON 然后做相应的处理，在这里我就不做解释了。

加入了上述信息后，当我们把百度地图固定到任务栏上，就能看到对应的图标和 Jump List 。

添加动态信息

接下来我们要添加动态信息。百度地图适合添加什么样的动态信息呢？考虑到用户可能经常需要搜索相同或相似的路线，我们可以把用户的搜索记录保存下来，并放到 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[i]; 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); } };