0


js中history对象

在 JavaScript 中,history 对象表示浏览器窗口的历史记录,允许你在用户在浏览器中访问过的 URL 之间进行前进和后退的导航。history 对象是 Window 对象的属性,所以在浏览器环境中直接访问即可。

history 对象提供了一系列用于操作历史记录的方法和属性,其中最常用的是以下几个:

  1. back(): 后退一页,相当于用户点击浏览器的“后退”按钮。

  2. forward(): 前进一页,相当于用户点击浏览器的“前进”按钮。

  3. go(n): 前进或后退 n 页,n 为负数表示后退,正数表示前进。

  4. pushState(state, title, url): 将一个新的状态添加到历史记录中,并将当前 URL 替换为指定的 URL。

  5. replaceState(state, title, url): 将当前状态替换为新的状态,并将当前 URL 替换为指定的 URL。

其中 pushState() 和 replaceState() 是 HTML5 新增的方法,它们可以在不刷新页面的情况下修改 URL 和浏览历史记录。当这两个方法被调用时,会触发一个 popstate 事件,可以通过 window.addEventListener('popstate', function(){ ... }) 来监听。

除了方法之外,history 对象还有一些属性可以供我们使用,比如:

  1. length: 返回历史记录中的页面数量。

  2. state: 返回当前历史记录条目的状态对象。

需要注意的是,history 对象只能访问到与当前页面在同一个浏览器窗口打开的页面的 URL 历史记录,无法访问到其他窗口的 URL 历史记录。此外,history 对象的一些方法(如 pushState 和 replaceState)在旧版浏览器中不被支持,需要进行兼容处理。

back,forward

下面是一个简单的例子,演示如何使用 history 对象:

<!DOCTYPE html>
<html>
<head>
    <title>History Object Example</title>
    <script>
        functiongoBack() {
            history.back();
        }
        
        functiongoForward() {
            history.forward();
        }
    </script>
</head>
<body>
    <buttononclick="goBack()">Back</button>
    <buttononclick="goForward()">Forward</button>
</body>
</html>

这个例子创建了两个按钮,一个用于回到历史记录中的上一个页面,另一个用于前进到历史记录中的下一个页面。在这两个按钮的 onclick 事件中,我们调用了 history.back() 和 history.forward() 方法来实现这些功能。

state状态作用

当调用pushState或replaceState方法时,可以通过第一个参数设置一个状态对象,该对象会被保存到浏览器的历史记录中。当调用back、forward、go等方法时,历史记录会发生改变,同时也会触发window的popstate事件,可以通过该事件获取当前历史记录的状态对象。

下面是一个简单的例子,通过pushState方法设置一个状态对象,并监听popstate事件获取状态对象:

// 设置状态对象并将URL改变为/index.html
history.pushState({page: "index"}, "Index", "/index.html");
​
// 监听popstate事件
window.addEventListener("popstate", function(event) {
  console.log("location: "+document.location+", state: "+JSON.stringify(event.state));
});
​
// 调用back方法回到上一个历史记录
history.back();

在上面的代码中,调用pushState方法设置了一个状态对象,其中包含了一个名为page的属性,值为"index",将URL地址改变为/index.html。随后监听了popstate事件,当调用back方法回到上一个历史记录时,popstate事件会被触发,可以在事件处理函数中获取到当前历史记录的状态对象,通过JSON.stringify方法将其序列化为字符串输出到控制台中。

pushState(),replaceState()

pushState() 方法将一个新的状态添加到浏览器历史记录中,而不会导致浏览器进行实际的页面刷新。它接受三个参数:state、title 和 url。其中,state 参数是一个 JavaScript 对象,用于保存当前状态的数据;title 参数是一个字符串,表示新的历史记录条目的标题,目前大多数浏览器都忽略这个参数;url 参数是一个字符串,表示新的历史记录条目的 URL。

举一个例子:

conststateObj= { foo: 'bar' };
consttitle='新页面标题';
consturl='http://example.com/newpage.html';
​
history.pushState(stateObj, title, url);

上面的代码将创建一个新的历史记录条目,其状态为 { foo: 'bar' },标题为 '新页面标题',URL 为 http://example.com/newpage.html。但是,这个新的历史记录条目并不会导致浏览器进行实际的页面刷新,因为 pushState() 方法只是将一个新的状态添加到浏览器历史记录中。

与 pushState() 方法不同,replaceState() 方法会修改当前历史记录条目的状态,而不会创建新的历史记录条目。它的参数和 pushState() 方法一样,但是不会创建新的历史记录条目。相反,它会将当前的历史记录条目替换为一个新的状态。

举一个例子:

conststateObj= { foo: 'bar' };
consttitle='新页面标题';
consturl='http://example.com/newpage.html';
​
history.replaceState(stateObj, title, url);

上面的代码将修改当前的历史记录条目,将其状态改为 { foo: 'bar' },标题改为 '新页面标题',URL 改为 http://example.com/newpage.html。但是,这个修改并不会导致浏览器进行实际的页面刷新,因为 replaceState() 方法只是将当前的历史记录条目的状态替换为一个新的状态。

如何监听,通过history对象的页面跳转

要监听history对象的页面跳转,可以使用window对象上的popstate事件来实现。当用户使用前进/后退按钮导致history对象状态发生变化时,popstate事件会被触发。

可以通过使用window对象的addEventListener方法来添加popstate事件监听器,如下所示:

window.addEventListener('popstate', function(event) {
  // do something when the history state changes
});

在事件处理程序中,可以使用history.state属性来访问当前状态对象。例如,可以将一个状态对象与每个pushState()方法一起存储,然后在popstate事件处理程序中访问它,以确定何时应该更新页面内容。

例如,以下代码演示了如何将一个简单的状态对象与pushState()一起使用,并在popstate事件处理程序中访问它:

conststateObj= { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");
​
window.addEventListener('popstate', function(event) {
  console.log(event.state);  // outputs: {foo: "bar"}
});

在上面的示例中,当用户在浏览器中点击后退按钮时,popstate事件将被触发,并且状态对象将被输出到控制台。

标签: html5 javascript 前端

本文转载自: https://blog.csdn.net/m0_61696809/article/details/129141166
版权归原作者 学不会只能哭 所有, 如有侵权,请联系我们删除。

“js中history对象”的评论:

还没有评论