行使ajax和js无刷新改变页面内容和地点栏U福特ExplorerL

发觉一个足以改变地址栏,而不造成页面刷新的东东。 Chrome,
FF测试通过,不帮忙IE.

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

完毕目的

  1. 页面包车型客车跳转(前进后退,点击等)不重复请求页面
  2. 页面U福特ExplorerL与页面突显内容同样(符合人们对价值观网页的认识)
  3. 在不补助的浏览器下跌级成古板网页的章程

实现目的

  1. 页面包车型地铁跳转(前进后退,点击等)不另行请求页面
  2. 页面U君越L与页面突显内容一律(符合人们对价值观网页的认识)
  3. 在不帮衬的浏览器下跌级成古板网页的章程

行使到的API

选择到的API

history.state

此时此刻U中华VL下相应的景观新闻。要是当前U昂科威L不是由此pushState或然replaceState发生的,那么history.state是null。

history.state

日前U奥迪Q7L下相应的情事消息。假若当前ULANDL不是因此pushState或然replaceState发生的,那么history.state是null。

history.pushState(state, title, url)

将日前U宝马7系L和history.state参加到history中,并用新的state和U君越L替换当前。不会导致页面刷新。

state:与要跳转到的U卡宴L对应的景色消息。

title:不晓得干啥用,传空字符串就行了。

url:要跳转到的U安德拉L地址,不可能跨域。

history.pushState(state, title, url)

将近来U兰德酷路泽L和history.state加入到history中,并用新的state和U奥迪Q5L替换当前。不会招致页面刷新。

state:与要跳转到的URubiconL对应的动静消息。

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

url:要跳转到的U瑞鹰L地址,不能跨域。

history.replaceState

用新的state和UEnclaveL替换当前。不会导致页面刷新。

state:与要跳转到的U大切诺基L对应的意况新闻。

title:不精晓干啥用,传空字符串就行了。

url:要跳转到的U福特ExplorerL地址,无法跨域。

history.replaceState

用新的state和UCR-VL替换当前。不会造成页面刷新。

state:与要跳转到的UOdysseyL对应的事态音讯。

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

url:要跳转到的UPRADOL地址,不可能跨域。

window.onpopstate

history.go和history.back(包罗用户按浏览器历史升高后退按钮)触发,并且页面无刷的时候(由于应用pushState修改了history)会触发popstate事件,事件时有发生时浏览器会从history中取出U酷威L和呼应的state对象替换当前的U本田CR-VL和history.state。通过event.state也得以取得history.state。

window.onpopstate

history.go和history.back(包蕴用户按浏览器历史发展后退按钮)触发,并且页面无刷的时候(由于采用pushState修改了history)会触发popstate事件,事件发生时浏览器会从history中取出UPRADOL和呼应的state对象替换当前的U景逸SUVL和history.state。通过event.state也得以得到history.state。

支持性判断

if (‘pushState’ in history) {…}

支持性判断

if (‘pushState’ in history) {…}

落实思路

用户通过“点击触发”,“操作历史”,“直接待上访问UEvoqueL”的格局修改当前UMuranoL。那二种触发格局会使浏览器做出差别的行为。如若页面做无刷跳转,那么页面具体展现怎么内容要求js来决定,js则需求基于一些消息来领会当前应当展现怎么内容,这个新闻正是history.state。那样大家假诺保持ULX570L和history.state一一对应,就能担保U福睿斯L和情节逐条对应。大多数状态下USportageL和history.state都以逐一对应的,但经过间接URL访问页面包车型大巴艺术进入页面,history.state是null,所以我们须求把UWranglerL转换来对应的history.state写入。大家不能够一向写入history.state,须求通过replaceState的方法写入。对于不扶助pushstate的浏览器,一律修改href跳转页面,等同于间接待上访问U冠道L。示意图如下。

图片 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);
    }

 

福衢寿车思路

用户通过“点击触发”,“操作历史”,“直接待上访问U奥迪Q5L”的法子修改当前U大切诺基L。那二种触发格局会使浏览器做出不一样的一坐一起。倘诺页面做无刷跳转,那么页面具体展现怎么内容必要js来支配,js则需求依据局地音信来领悟当前应该出示怎么内容,这一个音讯正是history.state。那样我们只要维持UKoleosL和history.state一一对应,就能确认保证USportageL和内容逐条对应。超越四分之二情况下U凯雷德L和history.state都以种种对应的,但通过直接U福特ExplorerL访问页面包车型客车格局进入页面,history.state是null,所以大家供给把UKoleosL转换到对应的history.state写入。大家无法一贯写入history.state,须要经过replaceState的办法写入。对于不匡助pushstate的浏览器,一律修改href跳转页面,等同于直接待上访问UPRADOL。示意图如下。 

图片 2

相关文章