Html5无刷新修改Url

Posted 叫我大头

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Html5无刷新修改Url相关的知识,希望对你有一定的参考价值。

html5无刷新修改Url,history pushState/replaceState

(2014-03-01 01:11:20)
标签:

it

 

一、认识window.history

window.history表示window对象的历史记录,是由用户主动产生,并且接受javascript脚本控制的全局对象。window对象通 过history对象提供对览器历史记录的访问能力。它暴露了一些非常有用的方法和属性,让你在历史记录中自由前进和后退。

1、历史记录的前进和后退

在历史记录中后退,可以这么做:

  1. window.history.back();

这就像用户点击浏览器的后退按钮一样。

类似的,你可以前进,就像在浏览器中点击前进按钮,像这样:

window.history.forward();

2、移动到指定历史记录点

通过指定一个相对于当前页面位置的数值,你可以使用go()方法从当前会话的历史记录中加载页面(当前页面位置索引值为0,上一页就是-1,下一页为1)。

要后退一页(相当于调用back()):

  1. window.history.go(-1);

向前移动一页(相当于调用forward()):

  1. window.history.go(1);

类似的,传递参数“2”,你就可以向前移动2个记录点。你可以查看length属性值,了解历史记录栈中一共有多少个记录点:

  1. window.history.length;

二、修改历史记录点

HTML5的新API扩展了window.history,使历史记录点更加开放了。可以存储当前历史记录点、替换当前历史记录点、监听历史记录点,下面逐一简要说明一下。

1、存储当前历史记录点

存储的方式类似于数组的入栈(Array.push()),在window.history里新增一个历史记录点,例如:

  1. // 当前的url为:http://www.qingdou.me/index.html
  2. var json={time:new Date().getTime()};
  3. // @状态对象:记录历史记录点的额外对象,可以为空
  4. // @页面标题:目前所有浏览器都不支持
  5. // @可选的url:浏览器不会检查url是否存在,只改变url,url必须同域,不能跨域
  6. window.history.pushState(json,”",”http://www.qingdou.me/post-1.html”);

    var state = {
            title: title,
            url: options.url,
            otherkey: othervalue
    };
    window.history.pushState(state, document.title, url);
    

执行了pushState方法后,页面的url地址为http://www.qingdou.me/post-1.html。

2、替换当前历史记录点

window.history.replaceState和window.history.pushState类似,不同之处在于replaceState不会在window.history里新增历史记录点,其效果类似于window.location.replace(url),都是不会在历史记录点里新增一个记录点的。当你为了响应用户的某些操作,而要更新当前历史记录条目的状态对象或URL时,使用replaceState()方法会特别合适。

3、监听历史记录点

监听历史记录点,直观的可认为是监听URL的变化,但会忽略URL的hash部分,监听URL的hash部分,HTML5有新的API为onhashchange,我的博客里也有说到该方法和跨浏览器的兼容解决方案。可以通过window.onpopstate来监听url的变化,并且可以获取存储在该历史记录点的状态对象,也就是上文说到的json对象,如:

  1. // 当前的url为:http://www.qingdou.me/post-1.html
  2. window.onpopstate=function()
  3. {
  4. // 获得存储在该历史记录点的json对象
  5. var json=window.history.state;
  6. // 点击一次回退到:http://www.qingdou.me/index.html
  7. // 获得的json为null
  8. // 再点击一次前进到:http://www.qingdou.me/post-1.html
  9. // 获得json为{time:1369647895656}
  10. }

值得注意的是:javascript脚本执行window.history.pushState和window.history.replaceState不会触发onpopstate事件。

还有一点注意的是,谷歌浏览器和火狐浏览器在页面第一次打开的反应是不同的,谷歌浏览器奇怪的是回触发onpopstate事件,而火狐浏览器则不会。

浏览器兼容性表:

FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
replaceState, pushState 5 4.0 (2.0) 10 11.50 5.0
history.state 18 4.0 (2.0) 10 11.50 6.0

基于ajax与html无刷新换url的jquery插件pjax。大家可以去网上看看。

还可以通过 改变 hash 值来进行页面刷新

主要功能有三个:普通搜索、高级搜索、后台管理,我分别给它们分配一个hash值:#search、#advsearch、#admin,在页面初始化的 时候,通过window.location.hash来判断用户需要访问的页面,然后通过javascript来调整显示页面。比如:
var hash;
hash=(!window.location.hash)?"#search":window.location.hash;
window.location.hash=hash;
  //调整地址栏地址,使前进、后退按钮能使用
switch(hash){  
case "#search": 
    selectPanel("pnlSearch");   //显示普通搜索面板 
    break;   
case "#advsearch":   
     
case "#admin": 
    
}
通 过window.location.hash=hash这个语句来调整地址栏的地址,使得浏览器里边的“前进”、“后退”按钮能正常使用(实质上欺骗了浏 览器)。然后再根据hash值的不同来显示不同的面板(用户可以收藏对应的面板了),这就使得Ajax页面的浏览趋于传统化了。

以上是关于Html5无刷新修改Url的主要内容,如果未能解决你的问题,请参考以下文章

html5 history.pushState+ajax 实现无刷新,浏览器地址栏title修改

使用ajax和history.pushState无刷新改变页面URL

JS无刷新修改URL类似博客园翻页效果

前端 页面无刷新方案二

无刷新页面修改地址栏

使用PHP和HTML5 FormData实现无刷新文件上传教程