路由模块router实现step1

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
     其他浏览器 > 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>

 

posted @ 2014-07-03 15:10  Emma.  阅读(781)  评论(2)  编辑  收藏  举报