hashchange事件
需要解决的问题：
1.IE6/7及兼容模式下的IE8不支持onhashchange事件，（而且hash改变不会产生history）
解决办法：用定时器来检测hash的变化；用隐藏的iframe调用document.write方法来产生历史；
2.hash的提取有兼容性问题：
* IE6会取少一总分hash，
如http://www.cnblogs.com/rubylouvre#stream/xxxxx?lang=zh_c
IE6 > location.hash = #stream/xxxxx
IE6 > location.hash = #stream/xxxxx
其他浏览器 > location.hash = #stream/xxxxx?lang=zh_c
* firefox会对hash进行decodeURIComponent
比如 http://www.cnblogs.com/rubylouvre/#!/home/q={%22thedate%22:%2220121010~20121010%22}
firefox 15 => #!/home/q={"thedate":"20121010~20121010"}
其他浏览器 => #!/home/q={%22thedate%22:%2220121010~20121010%22}
3.html5 history api 兼容pushState与replaceState， 研究一下history.js
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title></title> 6 </head> 7 <body> 8 <a href="#a">a</a> 9 <a href="#b">b</a> 10 <a href="#c">c</a> 11 <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script> 12 <script> 13 (function(global, $) { 14 var hashchange = 'hashchange', doc = document, documentMode = doc.documentMode, 15 supportHashChange = ('on' + hashchange in window) && (documentMode === void 0 || documentMode > 7); 16 17 var hash = '#', last_hash = getHash(), history_hash, timeoutID, delay = 50, iframe; 18 19 function getHash(url) { 20 url = url || doc.location.href; 21 return '#' + url.replace(/^[^#]*#?(.*)$/, '$1'); 22 } 23 24 //为了产生历史 25 function setHistory(curHash, history_hash) { 26 var d = iframe.document; 27 if (curHash != history_hash) { 28 d.open(); 29 d.write('<DOCTYPE html><html><body>' + curHash + '</body></html>'); 30 d.close(); 31 } 32 } 33 34 function setup() { 35 if (!supportHashChange) {//IE6.7及混杂模式下的IE8,不支持onhashchange事件，所以采用iframe+定时器模拟 36 if (!iframe) { 37 var $el = $('<iframe tabindex="-1" width="0" height="0" style="display:none" title="empty"></iframe>'); 38 $el.appendTo(doc.body); 39 iframe = $el[0].contentWindow; 40 $el.on('load', function() { 41 $el.off('load'); 42 var d = iframe.document; 43 d.open(); 44 d.write('<DOCTYPE html><html><body>' + hash + '</body></html>'); 45 d.close(); 46 timeoutID = setInterval(poll, delay); 47 }); 48 } 49 function poll() { 50 hash = getHash(); 51 history_hash = iframe.document.body.innerText; 52 if (hash != last_hash) {//当前窗口的hash改变 53 //console.log('current hash:' + hash + ',last hash:' + last_hash); 54 setHistory(last_hash = hash, history_hash); 55 //todo 在这里fire hashchange事件 56 } else if (history_hash != hash) {//如果按下回退健或前进健 57 //console.log('history hash:' + history_hash + ',current hash:' + hash) 58 location.href = location.href.replace(/#.*/, '') + history_hash; 59 } 60 } 61 } 62 } 63 setup(); 64 })(window, $); 65 </script> 66 </body> 67 </html>