不支持IE.将目前URL和history.state加入到history中。

发现一个方可变更地址栏,而休招页面刷新的东东。 Chrome,
FF测试通过,不支持IE.

运用pushState开发无刷页面切换<转>

连带文档:https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating*the*browser\_history  

 

实现目标

  1. 页面的跳转(前进后退,点击等)不还请页面
  2. 页面URL及页面展现内容一致(符合人们对民俗网页的认)
  3. 于非支持之浏览器下降层成人情网页的方式

实现目标

  1. 页面的跳转(前进后退,点击等)不更请页面
  2. 页面URL以及页面展现内容千篇一律(符合人们对民俗网页的认识)
  3. 当无支持的浏览器下降层成传统网页的计

应用及之API

利用到的API

history.state

眼下URL下相应之状态信息。如果手上URL不是经pushState或者replaceState产生的,那么history.state是null。

history.state

此时此刻URL下相应的状态信息。如果手上URL不是透过pushState或者replaceState产生的,那么history.state是null。

history.pushState(state, title, url)

将目前URL和history.state加入到history中,并就此新的state和URL替换当前。不会见招致页面刷新。

state:与如跳反至的URL对应的状态信息。

title:不亮干啥用,传空字符串就尽了。

url:要跳反至之URL地址,不可知跨域。

history.pushState(state, title, url)

拿眼前URL和history.state加入到history中,并为此新的state和URL替换当前。不见面导致页面刷新。

state:与如超越反至之URL对应的状态信息。

title:不知底干啥用,传空字符串就实施了。

url:要超越反到的URL地址,不克跨域。

history.replaceState

故而新的state和URL替换当前。不见面造成页面刷新。

state:与如超越反至之URL对应的状态信息。

title:不知情干啥用,传空字符串就实行了。

url:要跨越反到之URL地址,不能够跨域。

history.replaceState

故新的state和URL替换当前。不会见造成页面刷新。

state:与如跨越反到的URL对应之状态信息。

title:不知情干啥用,传空字符串就执行了。

url:要跨越反至之URL地址,不能够跨域。

window.onpopstate

history.go和history.back(包括用户按浏览器历史进步后退按钮)触发,并且页面无刷的上(由于采用pushState修改了history)会触发popstate事件,事件来时浏览器会从history中取出URL和呼应的state对象替换当前之URL和history.state。通过event.state也足以抱history.state。

window.onpopstate

history.go和history.back(包括用户以浏览器历史前进后退按钮)触发,并且页面无刷的时刻(由于下pushState修改
了history)会触发popstate事件,事件发生时浏览器会从history中取出URL和对应的state对象替换当前的URL和
history.state。通过event.state也堪博history.state。

支持性判断

if (‘pushState’ in history) {…}

支持性判断

if (‘pushState’ in history) {…}

兑现思路

用户通过“点击触发”,“操作历史”,“直接看URL”的不二法门修改时URL。这三栽点方式会如浏览器做出不同的作为。如果页面做无刷跳转,那么页面具体显示什么内容需js来控制,js则需要基于部分消息来喻当前应有亮什么内容,这个信息就是history.state。这样我们如果维持URL和history.state一一对应,就会担保URL和情节逐条对应。大部分情下URL和history.state都是各个对应之,但通过直接URL访问页面的法子上页面,history.state是null,所以我们要把URL转换成为相应的history.state写入。我们无可知一直写副history.state,需要通过replaceState的方写入。对于无支持pushstate的浏览器,一律修改href跳反页面,等同于直接看URL。示意图如下。

图片 1

 

本来地方链接: http://www.cnblogs.com/flash3d/archive/2013/10/23/3384823.html

 

 

 


 

分割线


 

 

jquery.history
可以供更好之兼容性(下载地址):http://files.cnblogs.com/files/08shiyan/jquery.histroy.zip

因此法大简单:

    /*
    * 替换当前url 并不导致浏览器页面刷新
    * name 参数名
    * value 参数值
    */
     function replaceUrl  (name, value) {        
        var obj = new Object();
        obj[name] = value;
        obj.rand = Math.random();
        History.replaceState(obj, '', '?' + name + '=' + value);
    }

 

实现思路

用户通过“点击触发”,“操作历史”,“直接看URL”的道修改时URL。这三种点方式会要浏览器做出不同的所作所为。如果页面做无刷跳转,那
么页面具体显示什么内容需js来决定,js则要基于一些音来掌握当前应当显示什么内容,这个消息就是是history.state。这样咱们若维持
URL和history.state一一对应,就会担保URL和情节逐条对应。大部分情下URL和history.state都是逐一对应之,但通过直
接URL访问页面的章程进入页面,history.state是null,所以我们得将URL转换成为相应的history.state写入。我们不能够直
接写副history.state,需要经过replaceState的计写入。对于未支持pushstate的浏览器,一律修改href跳反页面,等
同于直接看URL。示意图如下。
图片 2

 

相关文章