Browser 对象(一、history)
来源:互联网 发布:潍坊市行知学校 编辑:程序博客网 时间:2024/06/05 10:31
history对象包含用户在浏览器窗口中访问过的URL
history对象是window对象的一部分,也就是说可以window.history进行访问
1、history对象的属性(length)
console.log(history.length);
通过history.length直接返回浏览器历史列表中URL的数量
2、history对象的方法back()
history.back();
<a href="javascript:history.back();">返回上一页</a>
<input type="button" value="返回上一页" onclick="returnBack()"/><script> function returnBack(){ history.back(); }<script>通过调用history.back()方法加载当前URL在浏览器历史列表中的前一个URL
3、history对象的方法forward()
history.forward();通过调用history.forward()方法加载当前URL在浏览器历史列表中的下一个URL
4、history对象的方法go()
(1)、当传入参数为num时
history.go(-1);//加载前第一个URLhistory.go(-2);//加载前第二个URLhistory.go(1);//加载下第一个URLhistory.go(2);//加载下第二个URL通过调用history.go()方法加载当前URL在浏览器历史列表中的第 num 个URL
(2)、当传入字符串时
history.go('baidu.com');通过调用history.go()方法加载离当前URL在浏览器历史列表中最近的带有‘baidu.com’字符串的URL
注意:在浏览器的历史列表中必须存在你访问的URL(例如:页面刚打开,浏览器历史列表中只有当前一个URL,你现在加载他的前一个或者后一个,甚至前两个或者后两个都不会有效果),代码才会执行,否则没有效果。也就是说你加载的URL在历史列表中必须存在,才能访问。
5.history对象的方法pushState()
pushState()是浏览器新添加的方法,作用是history.pushState()方法向浏览器历史添加一个状态,他的出现,是我们更加方便的解决了页面的无刷新操作,也就是pjax = pushState() + ajax
<script>$(function(){ var $body = $('body');//导航点击事件 $body.find('.module-group').on('click','.module-cell',function(){ //点击切换高亮显示 $body.find(this).addClass('on').siblings().removeClass('on');//后边做ajax请求页面的数据 //设置title var title = "年中大促" + $(this).text(); document.title = title; //在列表中插入参数URL history.pushState({ title: title }, title, location.href.split("?")[0] + "?param=" + $(this).index()); }); });</script>
实例:我们在pc端常见的分页方法,因头部等大部分都是相同的,所以我们分页的时候基本采用ajax请求来完成产品的替换,作用是为了减少页面的加载。这也就是无刷新操作。但是他会出现一个很严重的问题(由于页面没有重新加载,浏览器URL历史中在每次下一页后是不会新添加的URL,因为只是局部刷新,所以不会添加新的URL,这就导致了,浏览器的返回上一页功能不能使用),pushState()方法就提供了我们点击分页,添加一个新的参数不同得URL在历史列表中。
在 HTML 文件中, history.pushState() 方法向浏览器历史添加了一个状态。
语法:history.pushState(state, title, url);
参考:
https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState
6.window.onpopstate事件
pushState()方法只是添加了URL,但是没有监听到浏览器的前进、后退按钮的行为,window.onpopstate就是解决这个问题的。
<script>if (history.pushState) { window.addEventListener("popstate", function() { reloadFn(); }); // 默认载入 reloadFn(); }</script>
window.onpopstate是popstate事件在window对象上的事件处理程序.
每当处于激活状态的历史记录条目发生变化时,popstate事件就会在对应window对象上触发. 如果当前处于激活状态的历史记录条目是由history.pushState()方法创建,或者由history.replaceState()方法修改过的, 则popstate事件对象的state属性包含了这个历史记录条目的state对象的一个拷贝.
调用history.pushState()或者history.replaceState()不会触发popstate事件. popstate事件只会在浏览器某些行为下触发, 比如点击后退、前进按钮(或者在JavaScript中调用history.back()、history.forward()、history.go()方法).
当网页加载时,各浏览器对popstate事件是否触发有不同的表现,Chrome 和 Safari会触发popstate事件, 而Firefox不会.
语法:window.onpopstate = fun;
参考:
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/onpopstate
7.history对象的replaceState()方法
replaceState()的作用就是更改浏览器历史列表的当前URL,页面不会刷新
var eleMenus = $(".module-group .module-cell"); var reloadFn = function(target) { var param = location.href.split("?")[1], eleTarget = target || null; if (typeof param == "undefined") { if (eleTarget = eleMenus.get(0)) { // 如果没有查询字符,则使用第一个导航元素的查询字符内容 history.replaceState(null, document.title, location.href.split("#")[0] + "?param=0"); reloadFn(eleTarget); } } else { eleMenus.each(function() { if (eleTarget === null && $(this).hasClass('on')) { eleTarget = this; } }); if (!eleTarget) { // 如果查询序列没有对应的导航菜单,去除查询然后执行回调 history.replaceState(null, document.title, location.href.split("?")[0]); reloadFn(); } else { var num = parseInt(param.split("=")[1]); eleMenus.removeClass('on').eq(num).addClass('on'); } } };语法:history.replaceState(state, title, url);
jquery.pajx.js下载:
http://download.csdn.net/detail/m0_38082783/9883724
浏览器兼容性表:
参考:
http://www.zhangxinxu.com/wordpress/2013/06/html5-history-api-pushstate-replacestate-ajax/
- Browser 对象(一、history)
- 7. Browser 对象 - History 对象
- 8. Browser 对象 - History 对象(2)
- Browser 对象
- Browser对象
- Browser对象
- history对象
- History 对象
- history对象
- History 对象
- history对象
- History对象
- History对象
- History对象
- History 对象
- History 对象
- history对象
- history对象
- 我在软通大学的实训总结报告
- webApplicationContext 与servletContext
- Android自定义View实现商品评价星星评分控件
- JVM的基本结构和JVM的内存结构
- eslipse两种导入Java项目的方法
- Browser 对象(一、history)
- Kickstart Practice Round 2017 Problem C. Sherlock and Parentheses
- jenkins 出现“Error 403 No valid crumb was included in the request ”的解决方案
- redis 复制
- JVM调优监控方法
- Android 设置DrawableRight和DrawableLeft点击事件
- java基础:Java七大外企经典面试精讲视频
- js 变量的定义 数据类型 运算
- Linux内核链表