- 掛牌上市企業(yè)
- 60秒人工響應(yīng)
- 99.99%連通率
- 7*24h人工
- 故障100倍補(bǔ)償
如何讓你的網(wǎng)站支持IE9 Pinned Site |
| 發(fā)布時(shí)間: 2012/9/11 16:58:16 |
|
該如何展示 IE9 Pinned Site 呢？我可以寫(xiě)一個(gè)新的應(yīng)用，完全是為了展示 Pinned Site 的特性，但這樣就像是為了實(shí)現(xiàn)這些特性而利用這些特性。所以我想還是升級(jí)一個(gè)現(xiàn)有的網(wǎng)站好了，這樣更能說(shuō)明 Pinned Site 是如何起到優(yōu)化用戶體驗(yàn)的作用的。 我選擇了 hack 現(xiàn)在的百度地圖。由于 IE9 正式版還沒(méi)有發(fā)布，所以我 hack 的代碼暫時(shí)也不能發(fā)布到線上，只能私下玩玩。在這里，我選擇使用 Fiddler 來(lái)替換百度地圖首頁(yè)代碼，從而實(shí)現(xiàn) hack 的效果。 添加靜態(tài)信息 添加靜態(tài)信息是最容易的，只要寫(xiě)幾個(gè) meta 標(biāo)簽就可以了。那么我們就把百度地圖的相關(guān)信息填充上去吧。“任務(wù)”里面放什么鏈接呢？考慮到用戶使用地圖，通常就是搜索幾類(lèi)信息：地點(diǎn)、公交、駕車(chē)、周邊，我們就把這幾類(lèi)搜索的快速入口鏈接放上去吧。不過(guò)，由于百度地圖本身沒(méi)有實(shí)現(xiàn)這幾個(gè)快速入口的地址，所以我們需要在 JavaScript 里面實(shí)現(xiàn)一些小 trick 。 <meta name="application-name" content="百度地圖" /> <meta name="msapplication-tooltip" content="使用百度地圖瀏覽地圖、搜索地點(diǎn)、查詢(xún)公交駕車(chē)線路" /> <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=駕車(chē)； 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 時(shí)，在百度地圖首頁(yè)地址后面加上一個(gè)錨點(diǎn)，錨點(diǎn)內(nèi)含一個(gè) JSON ，用里面的信息表明使用哪個(gè)分類(lèi)搜索。在文章的后面會(huì)說(shuō)明如何用利用 JavaScript 識(shí)別 JSON 然后做相應(yīng)的處理，在這里我就不做解釋了。 加入了上述信息后，當(dāng)我們把百度地圖固定到任務(wù)欄上，就能看到對(duì)應(yīng)的圖標(biāo)和 Jump List 。[netxpage] 添加動(dòng)態(tài)信息 接下來(lái)我們要添加動(dòng)態(tài)信息。百度地圖適合添加什么樣的動(dòng)態(tài)信息呢？考慮到用戶可能經(jīng)常需要搜索相同或相似的路線，我們可以把用戶的搜索記錄保存下來(lái)，并放到 Jump List 的一個(gè)名為“歷史記錄”的分類(lèi)里面。 要實(shí)現(xiàn)這樣一個(gè)分類(lèi)，首先要記錄用戶點(diǎn)擊“百度一下”進(jìn)行搜索時(shí)文本框內(nèi)的信息，然后再把這些信息寫(xiě)到 Jump List 里面去。先看看如何捕獲用戶點(diǎn)擊“百度一下”按鈕的事件吧。 $（'#form1'）。submit（function （） { var historyItem = { 'type': 'poi', 'word': $（'#PoiSearch'）。val（） }; addHistoryItem（historyItem）； updateJumpList（）； }）； 我們監(jiān)聽(tīng)表單的提交事件，然后把搜索類(lèi)型和文本框內(nèi)的信息保存到一個(gè) JSON 里，然后把 JSON 存到 localStorage ，最后更新 Jump List 。如何把 JSON 保存到 localStorage ，以及在將來(lái)從 localStorage 中取回 JSON ，這些都不屬于本文的話題，大家可以看看資源下載一節(jié)的源代碼，這里就不展開(kāi)討論了。我們關(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）； } }; 我們把歷史記錄讀取出來(lái)，然后檢查現(xiàn)在是否在 IE9 中，再檢查現(xiàn)在是否在 Site Mode 中（也就是用戶已經(jīng)把站點(diǎn)固定到任務(wù)欄了）。由于 IE9 Beta 的缺陷，無(wú)法通過(guò)特性檢查來(lái)得知瀏覽器是否支持 Site Mode ，所以需要使用 try catch 模式，這將在正式版中修復(fù)。 接下來(lái)，我們遍歷歷史記錄，根據(jù)類(lèi)型信息組合 Jump List 項(xiàng)目的文本信息和地址，然后把項(xiàng)目添加到 Jump List 上。地址的做法同樣是使用錨點(diǎn)加 JSON ，到底這個(gè) JSON 在頁(yè)面打開(kāi)時(shí)是如何解釋的，請(qǐng)大家看資源下載一節(jié)的源代碼吧，我就不浪費(fèi)篇幅解釋了。 本文出自：億恩科技【1tcdy.com】 服務(wù)器租用/服務(wù)器托管中國(guó)五強(qiáng)！虛擬主機(jī)域名注冊(cè)頂級(jí)提供商！15年品質(zhì)保障！--億恩科技[ENKJ.COM] |
0371-60135900
京公網(wǎng)安備41019702002023號(hào)
香港服務(wù)器租用
美國(guó)服務(wù)器租用
電信骨干機(jī)房
聯(lián)通骨干機(jī)房
