操纵浏览器的历史记录

Cc_2011 发布于2019-08-21 10:54 / 1367人阅读

摘要：浏览器的对象提供的对象给予了我们访问和操纵历史记录仅针对当前文档的能力。浏览器返回一页。标题，暂时大多数浏览器都会忽略此参数，传入空字符串即可地址，传入的应与原地址同源，否则会报错事件每当同一个文档的浏览历史即对象出现变化时，就会触发事件。

浏览器的 window 对象提供的 history 对象给予了我们访问和操纵历史记录（仅针对当前文档）的能力。

history api

window.history.back(); 浏览器返回一页。
window.history.forward(); 浏览器前进一页。
window.history.go(i); 浏览器前进（后退）i 页，如果 i 为 0 ，则刷新当前页面。
window.history.length; 浏览器历史记录栈中一共有多少页。
window.history.state; 当前的状态对象

window.history.replaceState(obj, title, url)
window.history.pushState(obj, title, url);
两个方法都可以达到替换当前浏览器地址而不刷新页面的作用：让浏览器的地址栏显示为我们传入的地址，但不会加载该页面也不会检查该页面是否存在。
区别在于前者会修改当前历史记录条目，而后者是创建新历史记录条目。

方法接受三个参数

状态对象（state object），任何可序列化的对象都可以被当做状态对象，大小限制为 640K。

标题（title），暂时大多数浏览器都会忽略此参数，传入空字符串即可

地址（URL），传入的 url 应与原地址同源，否则会报错

popstate事件

每当同一个文档的浏览历史（即 history 对象）出现变化时，就会触发 popstate 事件。但是pushState 和 replaceState 两个方法不会触发该事件
事件的回调函数的 event 参数的state 属性指向 pushState 和 replaceState 方法为当前 url 所提供的状态对象（即这两个方法的第一个参数）。

window.addEventListener("popstate", function(event) {  
  console.log("location: " + document.location);
  console.log("state: " + JSON.stringify(event.state));  
  // 或者通过 var currentState = history.state; 来获取状态对象
});

GPU云服务器云服务器历史浏览记录在哪记录历史历史记录天气历史记录

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86376.html

历史记录API中hashchange与popstate的比较

摘要：与事件都是浏览器历史记录，两者都是中的，相对而言比更为强大。事件本身只是监测的变化，我认为目前其主要意义就是与搭配使用从而使得在下历史记录前进后退按钮依然有效。地址新的历史记录条目的地址。 hashchange与popstate事件都是浏览器历史记录API，两者都是HTML5中的API，相对而言popstate比hashchange更为强大。注意这两种历史记录管理都受同源策略的限制，这...

Yangder 2019-08-19 17:48 评论0 收藏0
作为window对象属性的元素多窗口和窗体

摘要：作为对象属性的文档元素如果文档中用属性为元素命名。其就是交互窗口中的每个窗口窗体都是的执行上下文。以对象作为全局对象，这样的话，一个窗口窗体中的代码可以应用到其他窗口或者窗体并且同源策略没有进行阻止。作为window对象属性的文档元素如果html文档中用id属性为元素命名。并且如果 window对象没有此名字的属性，则window对象会赋予一个属性，其名字为id属性的值，其值指向该...

fredshare 2019-08-23 10:41 评论0 收藏0