html5 pushstate用法,h5中history.pushState的用法

h5中提供了不修改页面内容只修改地址栏的api，pushState(添加浏览历史),replaceState(修改当前浏览历史)，popState事件在用户返回或前进进会被出发触发

history.pushState方法接受三个参数，依次为：

state：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填null。可用它来传一些数据

title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。

url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

history.replaceState方法跟pushState一样只不过replaceState是修改当前的状态

popState的触发

仅仅调用pushState方法或replaceState方法，并不会触发该事件，只有用户点击浏览器倒退按钮和前进按钮，或者使用JavaScript调用back、forward、go方法时才会触发。另外，该事件只针对同一个文档，如果浏览历史的切换，导致加载不同的文档，该事件也不会触发。

此事件可以添加一个回调函数，函数的第一个参数为事件,事件的state属性是pushState和replaceState中传递的第一个参数state

判断浏览器是否支持这些api,并添加一些记录,如下添加三个if (!!(window.history && history.pushState)) {

// 支持History API

history.pushState('#1', null, '#1');

history.pushState({ a: 1, b: 2 }, null, '#2');

history.pushState('#3', null, '#3');

window.onpopstate = function(event) {

console.log('location: ' + document.location);

console.log(event.state);

};

//另一种添加事件的方法

window.addEventListener('popstate', function(event) {

console.log('location: ' + document.location);

console.log(event.state);

});

}

页面加入上面代码后打开页面地址后面会跟一个#3，当第一次点返回按钮时会输出如下值，并且页面url变成 #2

如果这个时候再前进则会输出如下

这个时候地址栏里是 #3

也就是说popstate事件发生时event里是和当前url匹配的一些数据

html5 pushstate用法,h5中history.pushState的用法相关推荐

java attributes用法_C#中的Attributes的用法
今天研究了一下C#中的Attributes的用法,感觉很有用,现总结以下: 在前台用JS写的脚本方法,除了可以直接用在前台控件的属性中,还可以在后台运用. 即在后台页面加载时,调用JS方法.语法格式有 ...
oracle中rollback用法,Oracle中SAVEPOINT和ROLLBACK用法
savepoint是事务内部允许部分rollback的标志符.因为事务中对记录做了修改,我们可以在事务中创建savepoint来标识不同的点.如果遇到错误,就可以rollback到不同的点或直接回来事 ...
python中divmod函数的用法_Python中divmod函数的用法
Python中divmod函数的用法,语言,余数,是一种,面向对象,函数 Python中divmod函数的用法 Python中divmod函数的用法在Python中divmod函数的作用是把除数和余 ...
python的for语句用法_python中list循环语句用法实例
本文实例讲述了python中list循环语句用法.分享给大家供大家参考.具体用法分析如下: Python 的强大特性之一就是其对 list 的解析,它提供一种紧凑的方法,可以通过对 list 中的每个 ...
linux中ftp的用法,linux中的ftp命令用法（7页）-原创力文档
第第 PAGE 1 页共 NUMPAGES 1 页 linux中的ftp命令用法 Linux系统中的ftp命令功能强大,那么它的具体用法是怎样呢?下面由小编为大家整理了linux中的ftp命令用法 ...
pythonsys用法_Python中 sys.argv[]的用法简明解释
Python中 sys.argv[]的用法简明解释因为是看书自学的python,开始后不久就遇到了这个引入的模块函数,且一直在IDLE上编辑了后运行,试图从结果发现它的用途,然而结果一直都是没结果, ...
python的继承用法_python中继承有什么用法？python继承的用法详解
本篇文章给大家带来的内容是关于python中继承有什么用法?python继承的用法详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 面向对象三大特征 1.封装:根据职责将属性和方法 ...
python中sorted函数的用法_Python3 中sorted() 函数的用法
描述 sorted() 函数对所有可迭代的对象进行排序操作. 语法 sorted(iterable, key=None, reverse=False) iterable – 可迭代对象. key – ...
python中main的含义及用法_python中main函数的用法
Python Python开发 Python语言 python中main函数的用法什么场景下会有main函数? 当该python脚本被作为模块(module)引入(import)时,其中的main( ...

html5 pushstate用法,h5中history.pushState的用法

html5 pushstate用法,h5中history.pushState的用法相关推荐

最新文章

热门文章