文章內(nèi)容

如何讓你的網(wǎng)站支持IE9 Pinned Site

發(fā)布時間: 2012/9/11 16:58:16

該如何展示 IE9 Pinned Site 呢？我可以寫一個新的應(yīng)用，完全是為了展示 Pinned Site 的特性，但這樣就像是為了實現(xiàn)這些特性而利用這些特性。所以我想還是升級一個現(xiàn)有的網(wǎng)站好了，這樣更能說明 Pinned Site 是如何起到優(yōu)化用戶體驗的作用的。
    我選擇了 hack 現(xiàn)在的百度地圖。由于 IE9 正式版還沒有發(fā)布，所以我 hack 的代碼暫時也不能發(fā)布到線上，只能私下玩玩。在這里，我選擇使用 Fiddler 來替換百度地圖首頁代碼，從而實現(xiàn) hack 的效果。
    添加靜態(tài)信息
    添加靜態(tài)信息是最容易的，只要寫幾個 meta 標簽就可以了。那么我們就把百度地圖的相關(guān)信息填充上去吧。“任務(wù)”里面放什么鏈接呢？考慮到用戶使用地圖，通常就是搜索幾類信息：地點、公交、駕車、周邊，我們就把這幾類搜索的快速入口鏈接放上去吧。不過，由于百度地圖本身沒有實現(xiàn)這幾個快速入口的地址，所以我們需要在 JavaScript 里面實現(xiàn)一些小 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 時，在百度地圖首頁地址后面加上一個錨點，錨點內(nèi)含一個 JSON ，用里面的信息表明使用哪個分類搜索。在文章的后面會說明如何用利用 JavaScript 識別 JSON 然后做相應(yīng)的處理，在這里我就不做解釋了。
    加入了上述信息后，當我們把百度地圖固定到任務(wù)欄上，就能看到對應(yīng)的圖標和 Jump List 。[netxpage]
    添加動態(tài)信息
    接下來我們要添加動態(tài)信息。百度地圖適合添加什么樣的動態(tài)信息呢？考慮到用戶可能經(jīng)常需要搜索相同或相似的路線，我們可以把用戶的搜索記錄保存下來，并放到 Jump List 的一個名為“歷史記錄”的分類里面。
    要實現(xiàn)這樣一個分類，首先要記錄用戶點擊“百度一下”進行搜索時文本框內(nèi)的信息，然后再把這些信息寫到 Jump List 里面去。先看看如何捕獲用戶點擊“百度一下”按鈕的事件吧。
    $（'#form1'）。submit（function （） {
    var historyItem = {
    'type': 'poi',
    'word': $（'#PoiSearch'）。val（）
    };
    addHistoryItem（historyItem）；
    updateJumpList（）；
    }）；
    我們監(jiān)聽表單的提交事件，然后把搜索類型和文本框內(nèi)的信息保存到一個 JSON 里，然后把 JSON 存到 localStorage ，最后更新 Jump List 。如何把 JSON 保存到 localStorage ，以及在將來從 localStorage 中取回 JSON ，這些都不屬于本文的話題，大家可以看看資源下載一節(jié)的源代碼，這里就不展開討論了。我們關(guān)注的是如何將 JSON 中的數(shù)據(jù)添加到 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）； }
    };
    我們把歷史記錄讀取出來，然后檢查現(xiàn)在是否在 IE9 中，再檢查現(xiàn)在是否在 Site Mode 中（也就是用戶已經(jīng)把站點固定到任務(wù)欄了）。由于 IE9 Beta 的缺陷，無法通過特性檢查來得知瀏覽器是否支持 Site Mode ，所以需要使用 try catch 模式，這將在正式版中修復(fù)。
    接下來，我們遍歷歷史記錄，根據(jù)類型信息組合 Jump List 項目的文本信息和地址，然后把項目添加到 Jump List 上。地址的做法同樣是使用錨點加 JSON ，到底這個 JSON 在頁面打開時是如何解釋的，請大家看資源下載一節(jié)的源代碼吧，我就不浪費篇幅解釋了。
本文出自：億恩科技【www.ypdoo.com.cn】

服務(wù)器租用/服務(wù)器托管中國五強！虛擬主機域名注冊頂級提供商！15年品質(zhì)保障！--億恩科技[ENKJ.COM]