几种方法实现ajax请求内容时使用浏览器后退和前进功能

版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/article/details/51699770

ajax是一个非常好玩的小东西,不过用起来也会存在一些问题。 我们可以利用ajax进行无刷新改变文档内容,但是没办法去修改URL,即无法实现浏览器的前进与后退、书签的收藏功能。

利用location的hash部分和使用window.onhashchange来实现

hash就是uri中#及后面的部分,例如:www.google.com.hk#123的#123。当只有hash部分发生变化时,浏览器的历史记录会产生记录,但不会向服务器发出请求,这时按后退键地址栏的uri会变化但页面内容不变。

通过window.onhashchange事件来监听hash值的更改。

ie6、7均不支持onhashchange,但可以用setInterval定期检查hash的改变,或者onload中检查的方法

曾今经典场景:Gmail借助ifram和hash实现前进和后退功能

而这样的方式对搜索引擎是十分不友好的,twitter和google约定使用hash bang (#!xxx),也就是hash后面的第一个字符为感叹号,这样的网址他们是会爬取的,但是其他搜索引擎不支持。

html5的history

在HTML4,Histroy对象有下面属性方法:

  • length:历史堆栈中的记录数。
  • back():返回上一页。
  • forward():前进到下一页。
  • go([delta]):delta是个数字,如果不写或为0,则刷新本页;如果为正数,则前进到相应数目的页面;若为负数,则后退到相应数目的页面。

在HTML5中,新增了两个方法和一个事件:

pushState

history.pushState(stateObject, title, url),包括三个参数。

  • 第一个参数用于存储该url对应的状态对象,该对象可在onpopstate事件对象(event.state)中获取,也可在history对象(history.state)中获取。
  • 第二个参数是标题,目前浏览器并未实现。
  • 第三个参数则是设定的url。一般设置为相对路径,如果设置为绝对路径时需要保证同源。

pushState函数向浏览器的历史堆栈压入一个url为设定值的记录,并改变历史堆栈的当前指针至栈顶。

replaceState

该接口与pushState参数相同,含义也相同。唯一的区别在于replaceState是替换浏览器历史堆栈的当前历史记录为设定的url。需要注意的是,replaceState**不会改动**浏览器历史堆栈的当前指针。

onpopstate

该事件是window的属性。该事件会在调用浏览器的前进、后退以及执行history.forward、history.back、和history.go触发,因为这些操作有一个共性,即修改了历史堆栈的当前指针。在不改变document的前提下,一旦当前指针改变则会触发onpopstate事件。

popstate事件对象(event)的state属性包含了这个历史记录条目的state对象的一个拷贝.

window.onpopstate = function(event) {
  alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};
//绑定事件处理函数. 
history.pushState({page: 1}, "title 1", "?page=1");    //添加并激活一个历史记录条目 http://example.com/example.html?page=1,条目索引为1
history.pushState({page: 2}, "title 2", "?page=2");    //添加并激活一个历史记录条目 http://example.com/example.html?page=2,条目索引为2
history.replaceState({page: 3}, "title 3", "?page=3"); //修改当前激活的历史记录条目 http://ex..?page=2 变为 http://ex..?page=3,条目索引为3
history.back(); // 弹出 "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // 弹出 "location: http://example.com/example.html, state: null
history.go(2);  // 弹出 "location: http://example.com/example.html?page=3, state: {"page":3}

查看张鑫旭大神写的例子。 具体场景实用解析http://www.cnblogs.com/accordion/p/5699372.html#top

浏览器兼容性

Feature

Chrome

Firefox (Gecko)

Internet Explorer

Opera Safari

replaceState, pushState

5

4.0 (2.0)

10

11.50

history.state

18

4.0 (2.0)

10

11.50

三、开源的PJAX库

并不是页面中所有的链接都需要使用PJAX加载,所有在需要这个东西的a标签上加一个属性,如data-pjax=true,然后统一添加事件。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端知识分享

深入理解Vue的生命周期

  谈到Vue的生命周期,相信许多人并不陌生。但大部分人和我一样,只是听过而已,具体用在哪,怎么用,却不知道。我在学习vue一个多礼拜后,感觉现在还停留在初级阶...

1193
来自专栏守候书阁

webpack+vue项目实战(四,前端与后端的数据交互和前端展示数据)

今天要做的,就是在上一篇文章的基础上,进行功能页面的开发。简单点说呢,就是与后端的数据交互和怎么把数据展示出来,用到的资源主要是element-ui和vue-r...

1952
来自专栏有趣的Python

IDEA 神器使用技巧

标记上bookmarks之后可以ctrl 1 ctrl 2 ctrl 3 按标签序号进行跳转

1033
来自专栏用户2442861的专栏

webStorm 3.0配置使用主题背景色等

http://www.cnblogs.com/jikey/archive/2012/01/16/2323590.html

1591
来自专栏Java技术分享圈

杨老师课堂之Excel VBA 程序开发第七讲之自动筛选

方式1:本节课件下载地址:链接: https://pan.baidu.com/s/1BW1T78d1zpeZq7yFbLOosg 密码: nf97

1162
来自专栏大学生计算机视觉学习DeepLearning

网络编程 课设 基于C++ MFC 连接数据库 小应用 小项目浅析展示

4246
来自专栏安恒网络空间安全讲武堂

Jarvis-OJ平台多题WriteUp分享

题目 ## PORT51 ## LOCALHOST ## Login ## 神盾局的秘密 ## IN A Mess ## RE ## flag在管理员手里 ##...

1.8K10
来自专栏大学生计算机视觉学习DeepLearning

VS下如何建立一个新的MFC程序 网络编程 课设 基于C++ MFC 连接数据库 小应用 小项目浅析展示

3193
来自专栏Golang语言社区

Golang笔记——并发

o语言中的main函数也是运行在一个单独的goroutine中的,一般称为 main goroutine,main函数结束时,会打断其它 goroutine 的...

3545
来自专栏jmeter高手高高手

Jmeter(三十一)_dummy sampler模拟数据驱动

之前写过一篇数据驱动的文章 数据驱动测试 ,但是内容过于简单,有些关键的地方没有写明白。这两天参照了一下官方文档,重新整理了一篇数据驱动测试!

2943

扫码关注云+社区

领取腾讯云代金券