- 掛牌上市企業
- 60秒人工響應
- 99.99%連通率
- 7*24h人工
- 故障100倍補償
如何讓你的網站支持IE9 Pinned Site |
| 發布時間: 2012/9/11 16:58:16 |
|
該如何展示 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[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）； } }; 我們把歷史記錄讀取出來，然后檢查現在是否在 IE9 中，再檢查現在是否在 Site Mode 中（也就是用戶已經把站點固定到任務欄了）。由于 IE9 Beta 的缺陷，無法通過特性檢查來得知瀏覽器是否支持 Site Mode ，所以需要使用 try catch 模式，這將在正式版中修復。 接下來，我們遍歷歷史記錄，根據類型信息組合 Jump List 項目的文本信息和地址，然后把項目添加到 Jump List 上。地址的做法同樣是使用錨點加 JSON ，到底這個 JSON 在頁面打開時是如何解釋的，請大家看資源下載一節的源代碼吧，我就不浪費篇幅解釋了。 本文出自：億恩科技【www.zuiquanben.com】 |
0371-60135900
京公網安備41019702002023號
香港服務器租用
美國服務器租用
電信骨干機房
聯通骨干機房
