网站分屏布局设计,jssdk wordpress,教育类网站设计,免费注册域名网站知乎前些天发现了一个巨牛的人工智能学习网站#xff0c;通俗易懂#xff0c;风趣幽默#xff0c;忍不住分享一下给大家。点击跳转到教程。
一、历史记录前进与后退
1.后退#xff1a;
window.history.back() -- 相当于用户在浏览器的工具栏上点击返回按钮#xff1b;
2.前…前些天发现了一个巨牛的人工智能学习网站通俗易懂风趣幽默忍不住分享一下给大家。点击跳转到教程。
一、历史记录前进与后退
1.后退
window.history.back() -- 相当于用户在浏览器的工具栏上点击返回按钮
2.前进
window.history.forward() -- 相当于用户在浏览器的工具栏上点击前进按钮
3.移动到指定历史记录点
通过go()方法指定一个相对于当前页面位置的数值从当前会话的历史记录中加载页面当前位置页面索引0上一页-1下一页1
window.history.go(-2)--后退2页相当于调用两次back();
window.history.go(1)--前进1页相当于调用forward();
*可以通过window.history.length得到历史记录栈中一共有多少页。
二、添加/修改历史记录条目
1.pushState(stateObject,title,URL):
逐条添加历史记录条目
a.状态对象stateObject--一个JavaScript对象与用pushState()方法创建的新历史记录条目关联。无论何时用户导航到新创建的状态popstate事件都会被触发并且事件对象的state属性都包含历史记录条目的状态对象的拷贝ps:FireFox浏览器强行限制状态对象的大小为640k超出则抛异常可通过sessionStorage或localStorage存储大的数据
b.标题title--传入一个简短的标题标明将要进入的状态FireFox浏览器目前会忽略该参数但是传一个空字符串会比较安全
c.地址URL--新的历史记录条目的地址可选不指定的话则为文档当前URL浏览器不会在调用pushState()方法后加载该地址传入的URL与当前URL应该是同源的否则pushState()会抛出异常。
*某种意义上调用pushState()有点类似于设置window.location#foo它们都会在当前文档内创建和激活新的历史记录条目。
拓展window.location--待研究
2.replaceState():
history.replaceState()操作类似于history.pushState()不同之处在于replaceState()方法会修改当前历史记录条目而并非创建新的条目。
3.popstate():
每当激活的历史记录发生变化时都会触发popstate事件。如果被激活的历史记录条目是由pushState所创建或是被replaceState方法影响到的popstate事件的状态属性将包含历史记录的状态对象的一个拷贝。
读取当前状态
如果页面中使用pushState()或replaceState()方法设置了一个状态对象然后用户重启了浏览器。当页面重新加载时页面会触发onload事件但不会触发popstate事件。可以使用history.state直接读取当前历史记录条目的状态而不需要等待popstate事件。
调用history.pushState()或者history.replaceState()不会触发popstate事件.pushState事件只会在其他浏览器操作时触发, 比如点击后退按钮(或者在JavaScript中调用history.back()方法)。
调用方法:
window.onpopstate function(event) {//做一些操作event.state; // 当前历史记录条目的状态
};
或者
window.addEventListener(popstate, function(event) {//做一些操作
});
