JavaScript不刷新实现浏览器的前进后退功能


Posted in Javascript onNovember 05, 2014

最近在学习backbone,学习理解backbone就要先理解spa,理解spa就要先了解单页面应用是如何做到页面不刷新改变url的。

相较于不同页面的跳转,AJAX可以说大大提高了用户的浏览体验,不用看到页面切换之间的白屏是件很惬意的事情。但是很多早先的AJAX应用是不支持浏览器的前进后退的,这导致了用户不管在网站里浏览到何处,一旦刷新就会立刻回到起初的位置,并且用户也无法通过浏览器的前进后退按钮来实现浏览历史的切换。

对于第一个问题,解决还算容易,只要用cookie或者localStorage来记录应用的状态即可,刷新页面时读取一下这个状态,然后发送相应ajax请求来改变页面即可。但是第二个问题就很麻烦了,先说下现代浏览器的解决方案。

HTML5 解决方案

要了解HTML5如何实现前进后退,就要先了解下history对象和location对象。

history对象

History 对象属性

1.length:返回浏览器历史列表中的URL数量,用户在当前标签每访问一个页面,此数量加1。因为隐私原因,URL具体内容不可见。
2.state:与当前网址相关的对象,只能通过pushState和replaceState添加或修改。我们可以可以用它来存储跟url有关的信息。

History 对象方法

1.history.back()

此方法无参数,触发后会返回前一个浏览的页面,相当于点击了浏览器的后退按钮。

2.history.forward()

此方法无参数,触发后会返回后退前浏览的页面,相当于点击了浏览器的前进按钮。

3.history.go(number)

此方法接受一个整形变量参数,history.go(-1)相当于后退一页,history.go(1)相当于前进一页,history.go(0)会刷新当前页面。

4.history.pushState(state, title, url)

改变url且不刷新页面的关键就是它了,此方法会改变当前页面的location.href并且修改当前的history.state对象,执行后history.length会增加1。此方法接受三个参数,

1.state:当前网址相关的对象。
2.title:页面标题,但是所有浏览器都忽略它,要改变标题还是要用document.title。
3.url:一个与当前页面同域的网址,location.href会变成此值。

5.history.replaceState(state, title, url)

此方法同上,但是它不会改变history.length,只会修改当history.state和location.href。

注意pushState和replaceState第三个参数不可跨域,并且不会触发浏览器的popstate事件和onhashchange事件(chrome33下测试)。

location对象

除了点击前进/后退按钮和history事件,还可以通过location的方法和修改location的属性来改变Url:

location对象的属性(读写):

1.host:域名+端口号
2.hostname:域名
3.port:端口号
4.protocol:协议
5.href:完整路径
6.origin:协议+域名+端口
7.hash:井号 (#) 开始的 URL(hash)
8.pathname:文档路径+文档名
9.search:(?)后面的内容

可以通过改变location.href或location.hash来达到无刷新的目的。

location对象的方法:

1.assign:改变url的值,并且将当前的url添加到历史记录中history.length会增加1。location.assig(‘#' + x)会改变url但是不刷新页面。
2.reload:刷新页面。
3.replace:改变url的值,但是history.length不变。使用方法同assign。

popstate事件

当url改变时,比如用户点击前进/后退按钮,history.go(n)(n不等于0),location.hash = x(x不等于当前的location.hash)都会触发此事件。可以用它来监听url,来实现各种功能。

    window.onpopstate = function(){

        //do sth

    }

onhashchange事件

改变hash值会触发popstate事件,而触发popstate事件不一定会触发onhashchange事件。经过测试:

1.hash改变但是location.pathname不变会触发onhashchange事件,比如history.pushState(”, ”, ‘#abc');
2.hash和location.pathname一起改变则不触发,比如history.pushState(”, ”, ‘a#abc');

老旧浏览器的写法

老旧浏览器也不支持pushState和replaceState,所以通过popstate(事实上也不支持这个方法)监听url变化的路走不通。那么只能通过改变url#后面的内容来达到无刷新,但是它们又不支持onhashchange,所以对url的变化是无动于衷的(除了页面会滚动至页面对应id的位置)。那么只能祭出大招:轮询,起一个setInterval来监听url的值。Like this:

var prevHash = window.location.hash; 

var callback = function(){...}

window.setInterval(function() { 

    if (window.location.hash != prevHash) { 

        prevHash = window.location.hash; 

        callback(prevHash); 

    } 

}, 100);

当然这样写非常非常挫,如果不考虑点击页面带有id的a标签来改变hash的情况,可以利用设计模式来优雅的实现监听url。比如经典的观察者模式,专门用一个类来实现改变hash的功能,然后所有要监听url变化的类(观察者)去订阅这个(被观察者)类。

//改变url的类

function UrlChanger() {

    var _this = this;

    this.observers = [];

    //添加观察者

    this.addObserver = function(obj) {...}

    //删除观察者

    this.deleteObserver = function(obj) {...}

    //通知观察者

    this._notifyObservers = function() {

        var length = _this.observers.length;

        console.log(length)

        for(var i = 0; i < length; i++) {

            _this.observers[i].update();

        }

    }

    //改变url

    this.changeUrl = function(hash) {

        window.location.hash = hash;

    _this._notifyObservers();

    }

}

//监听类

function oneOfObservers() {

    var _this = this;

    this.update = function() {...}

}

//实现

var o1 = new UrlChanger();

var o2 = new oneOfObservers();

o1.addObserver(o2);

o1.changeUrl('fun/arg1/arg2/');

//o2 has do sth...
Javascript 相关文章推荐
javascript实现的listview效果
Apr 28 Javascript
jQuery使用数组编写图片无缝向左滚动
Dec 11 Javascript
JQuery中SetTimeOut传参问题探讨
May 10 Javascript
javascript学习笔记之函数定义
Jun 25 Javascript
js实现页面跳转的几种方法小结
May 16 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
Sep 14 Javascript
JS中作用域和变量提升(hoisting)的深入理解
Oct 31 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
May 01 Javascript
Ionic3 UI组件之Gallery Modal详解
Jun 07 Javascript
基于vue2.x的电商图片放大镜插件的使用
Jan 22 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
Sep 21 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
Dec 19 Javascript
Javascript检查图片大小不要让大图片撑破页面
Nov 04 #Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
Nov 04 #Javascript
node.js中Socket.IO的进阶使用技巧
Nov 04 #Javascript
node.js中的Socket.IO使用实例
Nov 04 #Javascript
Node.js的特点和应用场景介绍
Nov 04 #Javascript
Node.js中的模块机制学习笔记
Nov 04 #Javascript
Node.js异步I/O学习笔记
Nov 04 #Javascript
You might like
PHP生成静态页面详解
2006/12/05 PHP
thinkPHP5.0框架API优化后的友好性分析
2017/03/17 PHP
YII框架关联查询操作示例
2019/04/29 PHP
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
2010/05/25 Javascript
仿猪八戒网左下角的文字滚动效果
2011/10/28 Javascript
tangram框架响应式加载图片方法
2013/11/21 Javascript
JS实现日期加减的方法
2013/11/29 Javascript
javascript移动设备Web开发中对touch事件的封装实例
2014/06/05 Javascript
深入理解JavaScript编程中的同步与异步机制
2015/06/24 Javascript
jquery获取url参数及url加参数的方法
2015/10/26 Javascript
JavaScript兼容浏览器FF/IE技巧
2016/08/14 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
2018/04/20 Javascript
ng-repeat指令在迭代对象时的去重方法
2018/10/02 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
2018/11/25 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
2018/12/06 Javascript
Vue中Axios从远程/后台读取数据
2019/01/21 Javascript
python中enumerate的用法实例解析
2014/08/18 Python
python基于socket实现网络广播的方法
2015/04/29 Python
pycham查看程序执行的时间方法
2018/11/29 Python
自定义Django默认的sitemap站点地图样式
2020/03/04 Python
Tensorflow中的dropout的使用方法
2020/03/13 Python
selenium WebDriverWait类等待机制的实现
2020/03/18 Python
Python colormap库的安装和使用详情
2020/10/06 Python
css3实现六边形边框的实例代码
2019/05/24 HTML / CSS
如何实现jdbc性能优化
2012/07/30 面试题
c语言常见笔试题总结
2016/09/05 面试题
园长自我鉴定
2013/10/06 职场文书
超市采购员岗位职责
2014/02/01 职场文书
文明风采获奖感言
2014/02/18 职场文书
三八妇女节活动主持词
2014/03/17 职场文书
幼儿园老师新年寄语2015
2014/12/08 职场文书
戒赌保证书
2015/05/11 职场文书
CSS3新特性详解(五):多列columns column-count和flex布局
2021/04/30 HTML / CSS
pyqt5打包成exe可执行文件的方法
2021/05/14 Python
详解redis分布式锁的这些坑
2021/05/19 Redis
.Net Core导入千万级数据至Mysql的步骤
2021/05/24 MySQL