佛山有那些定制网站建设公司,网站优化建设桂林,周口住房和城乡建设网站,网站上传空间的ip地址转载 https://www.cnblogs.com/jefferyE/p/7063018.html
用户访问网页的历史记录通常会被保存在一个类似于栈中#xff0c;即history对象#xff0c;点击返回就出栈#xff0c;跳下一页就入栈。 它提供了方法操作页面的前进和后退#xff1a; window.history.back() 返回到…转载 https://www.cnblogs.com/jefferyE/p/7063018.html
用户访问网页的历史记录通常会被保存在一个类似于栈中即history对象点击返回就出栈跳下一页就入栈。 它提供了方法操作页面的前进和后退 window.history.back() 返回到上一个页面 window.history.forward() 进入到下一个页面 window.history.go([delta]) 跳转到指定页面
HTML5 对History Api 进行了增强新增了两个Api和一个事件分别是pushState、replaceState 和 onpopstate
pushState是往history对象里添加一个新的历史记录即压栈。
replaceState 是替换history对象中的当前历史。
当点击浏览器后退按钮或js调用history.back都会触发onpopstate事件, 与其类似的还有一个事件: onhashchange 。
onhashchange是老API, 浏览器支持度高, 本来是用来监听hash变化的, 但可以被利用来做客户端前进和后退事件的监听onpopstate是专门用来监听浏览器前进后退的, 不仅可以支持hash, 非hash的同源url也支持。 如下
一、onhashchange 事件在当前 URL 的锚部分(以 # 号为开始) 发生改变时触发 。
锚部分的实例指定当前 URL 为 http://www.example.com/test.htm#part2 - 这个 URL 中的锚部分为 #part2。
你可以使用以下方式调用事件:
1、通过设置Location 对象 的 location.hash 或 location.href 属性修改锚部分。
2、使用不同书签导航到当前页面使用后退 或前进按钮
3、点击链接跳转到书签锚
demo:
!DOCTYPE html
html head
meta charsetutf-8
title菜鸟教程(runoob.com)/title
/head body p该实例演示了如何使用 addEventListener()方法 向 body 元素中添加 onhashchange 事件。/p
p点击按钮修改当前 URL 的锚部分为 #part5/p
button οnclickchangePart()点我/button
p iddemo/p
script
// 使用 location.hash 属性来修改锚部分
function changePart() {
location.hash part5;
var x 锚部分现在为: location.hash;
document.getElementById(demo).innerHTML x;
}
window.addEventListener(hashchange, myFunction);
function myFunction() {
alert(锚部分已修改);
} /script /body /html
二、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 funcRef; funcRef 是个函数名.
demo:
假如当前网页地址为http://example.com/example.html,则运行下述代码后
window.onpopstate function(event) {
alert(location: document.location , state: JSON.stringify(event.state));
};
//绑定事件处理函数.
history.pushState({page: 1}, title 1, ?page1); //添加并激活一个历史记录条目 http://example.com/example.html?page1,条目索引为1
history.pushState({page: 2}, title 2, ?page2); //添加并激活一个历史记录条目 http://example.com/example.html?page2,条目索引为2
history.replaceState({page: 3}, title 3, ?page3); //修改当前激活的历史记录条目 http://ex..?page2 变为 http://ex..?page3,条目索引为3
//history.back(); // 弹出 location: http://example.com/example.html?page1, state: {page:1}
//history.back(); // 弹出 location: http://example.com/example.html, state: null
//history.go(2); // 弹出 location: http://example.com/example.html?page3, state: {page:3}
即便进入了那些非pushState和replaceState方法作用过的(比如http://example.com/example.html)没有state对象关联的那些网页, popstate事件也仍然会被触发.
