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
 
 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8"/>

     <title></title>

 </head>

 <body>

 <a href="#a">a</a>

 <a href="#b">b</a>

 <a href="#c">c</a>

 <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>

 <script>

     (function(global, $) {

         var hashchange = 'hashchange', doc = document, documentMode = doc.documentMode,

                 supportHashChange = ('on' + hashchange in window) && (documentMode === void 0 || documentMode > 7);

         var hash = '#', last_hash = getHash(), history_hash, timeoutID, delay = 50, iframe;

         function getHash(url) {

             url = url || doc.location.href;

             return '#' + url.replace(/^[^#]*#?(.*)$/, '$1');

         }

         //为了产生历史

         function setHistory(curHash, history_hash) {

             var d = iframe.document;

             if (curHash != history_hash) {

                 d.open();

                 d.write('<DOCTYPE html><html><body>' + curHash + '</body></html>');

                 d.close();

             }

         }

         function setup() {

             if (!supportHashChange) {//IE6.7及混杂模式下的IE8,不支持onhashchange事件，所以采用iframe+定时器模拟

                 if (!iframe) {

                     var $el = $('<iframe tabindex="-1" width="0" height="0" style="display:none" title="empty"></iframe>');

                     $el.appendTo(doc.body);

                     iframe = $el[0].contentWindow;

                     $el.on('load', function() {

                         $el.off('load');

                         var d = iframe.document;

                         d.open();

                         d.write('<DOCTYPE html><html><body>' + hash + '</body></html>');

                         d.close();

                         timeoutID = setInterval(poll, delay);

                     });

                 }

                 function poll() {

                     hash = getHash();

                     history_hash = iframe.document.body.innerText;

                     if (hash != last_hash) {//当前窗口的hash改变

                         //console.log('current hash:' + hash + ',last hash:' + last_hash);

                         setHistory(last_hash = hash, history_hash);

                         //todo 在这里fire hashchange事件

                     } else if (history_hash != hash) {//如果按下回退健或前进健

                         //console.log('history hash:' + history_hash + ',current hash:' + hash)

                         location.href = location.href.replace(/#.*/, '') + history_hash;

                     }

                 }

             }

         }

         setup();

     })(window, $);

 </script>

 </body>

 </html>

路由模块router实现step1的更多相关文章

  1. nodejs -Router

    Node 用 request 事件来处理请求响应,事件内使用分支语句处理不同路径的请求,而 Express 封装了这些操作,使得代码简洁优雅 但如果请求路径变多,都写在 app.js 文件里的话,就会 ...

  2. NodeJs学习日报day6——路由模块

    const express = require('express') const app = express() app.get('/user', function(req, resp) { resp ...

  3. 从前端中的IOC理念理解koa中的app.use()

    忙里偷闲,打开平时关注的前端相关的网站,浏览最近最新的前端动态.佼佼者,平凡的我做不到,但还是要争取不做落后者. 前端中的IoC理念,看到这个标题就被吸引了.IoC 理念,不认识呢,点击去一看,果然没 ...

  4. 结合 webpack 使用 vue-router（七）

    结合 webpack 使用 vue-router: 首先安装路由包vue-router: cnpm install vue-router 使用模块化工具导入 vue-router 后,必须手动调用 V ...

  5. 带你学Node系列之express-CRUD

    前言 hello,小伙伴们,我是你们的pubdreamcc,本篇博文出至于我的GitHub仓库node学习教程资料,欢迎小伙伴们点赞和star,你们的点赞是我持续更新的动力. GitHub仓库地址:n ...

  6. Angular 路由⑦要素

    cnzt       http://www.cnblogs.com/zt-blog/p/7919185.html http://www.cnblogs.com/zt-blog/p/7919185.ht ...

  7. react 项目全家桶构件流程

    资源:create-react-app.react.react-dom.redux.react-redux.redux-thunk.react-router-dom.antd-mobile/antd. ...

  8. 后端小白的VUE入门笔记, 进阶篇

    使用 vue-cli( 脚手架) 搭建项目 基于vue-cli 创建一个模板项目 通过 npm root -g 可以查看vue全局安装目录,进而知道自己有没有安装vue-cli 如果没有安装的话,使用 ...

  9. node.js 路由详解

    路由的基本使用 第一步:获取url跟目录下的字符 var http = require('http'); var url = require('url') http.createServer(func ...

随机推荐

  1. u_boot启动过程中的具体分析（1）

    闭上眼睛,细致的回顾一下从NAND FLASH 启动的整个流程,首先,当我们打开板子的时候,先执行的就是嵌入在芯片上的iROM,它的作用就是为了把.NAND Flash 中的bootloader的一部 ...

  2. JMS样本

    1.JMS它是一个制作AS提供Message服务.它接受由生成的消息(Message Provider)消息发出,并转发消息到消息消费者(Message  Consumer).2.JMS提供2的消息服 ...

  3. Cocos2d-x 3.0final 终结者系列教程14-L新abel-Cocos2d-x公文

    目 录 新文本标签类Label 其它文本标签 字体制作工具使用介绍 小结 https://github.com/chukong/cocos-docs/blob/master/manual/framew ...

  4. php_公共方法01_传入数组_打印可见信息

    function decodeUnicode($str) { return preg_replace_callback('/\\\\u([0-9a-f]{4})/i', 'convert', $str ...

  5. uva757 - Gone Fishing(馋）

    题目:uva757 - Gone Fishing(贪心) 题目大意:有N个湖泊仅仅有一条通路将这些湖泊相连. 每一个湖泊都会给最開始5分钟间隔内能够调到的鱼(f).然后给每过5分钟降低的鱼的数量(d) ...

  6. HDOJ 3518 Boring counting

    SAM基本操作 拓扑寻求每个节点  最左边的出现left,最右边的出现right,已经有几个num ...... 对于每个出现两次以上的节点.对其所相应的一串子串的长度范围 [fa->len+1 ...

  7. 6.跑步者--并行编程框架 ForkJoin

    本文如果您已经了解一般并行编程知识.了解Java concurrent部分如ExecutorService等相关内容. 虽说是Java的ForkJoin并行框架.但不要太在意Java,当中的思想在其他 ...

  8. MVC日期格式化的2种方式

    原文:MVC日期格式化的2种方式 假设有这样的一个类,包含DateTime类型属性,在编辑的时候,如何使JoinTime显示成我们期望的格式呢? using System; using System. ...

  9. 自由软件之父、Google+设计者、Java之父、Linux之父、万维网之父、Vi编辑器之父、苹果Lisa电脑界面设计、微软首席软件架构师

    自由软件之父.Google+设计者.Java之父.Linux之父.万维网之父.Vi编辑器之父.苹果Lisa电脑界面设计.微软首席软件架构师 理查德·斯托曼(Richard Stallman) 理查德· ...

  10. 文件同步服务器，iis 集群 ，代码同步(一)

    文件同步服务器 BitTorrent Sync 有点像TeamViewer远程协助 软件,私钥连接. 使用版本就30 天,最近测试了,功能不够理想.有点遗憾,我觉得我可以写一个! 确实很好用.