History路由机制

最新推荐文章于 2024-08-27 15:40:35 发布

天蒙蒙亮

最新推荐文章于 2024-08-27 15:40:35 发布

阅读量735

点赞数

分类专栏： js

js 专栏收录该内容

45 篇文章 1 订阅

订阅专栏

转载 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>

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<p>该实例演示了如何使用 addEventListener()方法向 body 元素中添加 "onhashchange" 事件。</p>

<p>点击按钮修改当前 URL 的锚部分为 #part5</p>

// 使用 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", "?page=1"); //添加并激活一个历史记录条目 http://example.com/example.html?page=1,条目索引为1

history.pushState({page: 2}, "title 2", "?page=2"); //添加并激活一个历史记录条目 http://example.com/example.html?page=2,条目索引为2

history.replaceState({page: 3}, "title 3", "?page=3"); //修改当前激活的历史记录条目 http://ex..?page=2 变为 http://ex..?page=3,条目索引为3

//history.back(); // 弹出 "location: http://example.com/example.html?page=1, state: {"page":1}"