首页 > 分享 > JavaScript 如何使用处理后退和前进按钮

JavaScript 如何使用处理后退和前进按钮

JavaScript 如何使用处理后退和前进按钮

在本文中,我们将看到如何使用JavaScript控制浏览器的后退和前进按钮,并通过示例理解其实现方式。前进按钮用于跳转到下一页,而后退按钮用于返回到上一页。前进或后退按钮的状态取决于我们导航到的页面。

可以使用窗口历史对象来处理这些前进和后退按钮,该对象包含浏览器的历史记录。历史对象是窗口对象的属性之一。可以使用 window.history 或 history 来访问它。历史对象包含用户访问的所有URL的详细信息。它被所有主要浏览器支持。窗口历史对象提供了两种方法,可以用于在浏览器中导航到上一页或下一页,如下所述:

History forward() 方法: 这个方法用来加载历史列表中的下一个URL。forward() 方法有助于加载我们通过点击后退按钮来到此页面的URL。如果没有下一页,则无法点击前进按钮。 History back() 方法: 这个方法用来加载历史列表中的上一个URL。back() 方法有助于加载历史列表中之前访问过的URL。如果没有上一页,则无法点击后退按钮。

语法:

方法: 这个任务可以通过两种不同的方式来完成,即通过实现History.forward()方法或History.back()方法以及History.go()方法来实现。对于第一个示例,我们将使用History.forward()和History.back()方法,而对于第二个示例,我们将使用History.go()方法。我们将按照以下步骤进行操作:

创建一个HTML文件和两个标签

<

h1>和

<

h3>
* 之后,我们将创建两个名称为”forward”和”back”的按钮
* 之后,我们将为这两个按钮声明Onclick事件,该事件将在点击这些按钮时发生
* back按钮的Onclick事件将调用history对象的back()方法
* forwarding按钮的Onclick事件将调用history对象的forward()方法

示例1: 这个示例通过实现forward()和back()方法来说明window.history对象,这些方法帮助我们导航到上一页或下一页。

HTML

输出:

go() 方法的历史 :该方法在HTML中用于从历史列表中加载特定的URL。如果知道要从历史记录中加载的特定页面的编号或URL,则该方法是history.back()和history.forward()方法的更好替代方法。还可以使用此history对象的方法来实现前进和后退按钮。如果将“-1”作为参数传递,则它的行为类似于back()方法,而如果将“1”作为参数传递,则它的行为类似于forward()方法。

语法:

示例2: 此示例实现了使用window.history.go(1)和window.history.go(-1)的History go()方法。

HTML

输出:

相关知识

如何使用JavaScript处理浏览器的后退和前进按钮
如何在幻灯片中加入前进后退按钮
在word中如何后退和前进
vscode如何前进后退操作
CSS 实现“前进/后退”按钮的功能
word怎么前进和后退文字word中前进后退快捷键
VSCode前进后退(按钮、快捷键)
监控浏览器的前进后退
前进、后退
如何训练宠物狗前进和后退(让你的狗狗学会前进和后退的技巧)

网址: JavaScript 如何使用处理后退和前进按钮 https://m.mcbbbk.com/newsview448172.html

所属分类:萌宠日常
上一篇: Vim的撤销(undo)(回退)
下一篇: 什么是 BFCache(前进/后