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

如何使用JavaScript处理浏览器的后退和前进按钮

如何使用JavaScript处理浏览器的后退和前进按钮

在本文中,我们将看到如何使用JavaScript控制浏览器的后退和前进按钮,并通过图示了解其实现。前进按钮用于转到下一页,而后退按钮用于转到上一页。前进或后退按钮将根据我们导航的页面处于活动状态。

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

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事件,当点击按钮时触发
* 后退按钮的Onclick事件将调用history对象的back()方法
* 前进按钮的Onclick事件将调用history对象的forward()方法

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

输出:

如何使用JavaScript处理浏览器的后退和前进按钮

History go() 方法的历史 :在HTML中,这个方法用于从历史列表中加载特定的URL。如果知道要从历史中加载的特定页面的编号或URL,它是history.back()和history.forward()方法的更好选择。也可以使用这个history对象的方法来实现前进和后退按钮。如果我们传递“-1”作为参数,它将像back()一样工作,而如果我们传递“1”作为参数,它将像forward()一样工作。

语法:

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

输出结果:

如何使用JavaScript处理浏览器的后退和前进按钮

阅读更多:JavaScript 教程

相关知识

如何使用JavaScript处理浏览器的后退和前进按钮
监控浏览器的前进后退
利用js实现 禁用浏览器后退
【转】浏览器“后退”、“前进”或可以这么去监听
JS 页面前进、页面后退、页面跳转的方法
如何训练宠物狗前进和后退(让你的狗狗学会前进和后退的技巧)
如何训练宠物狗狗前进和后退(15个步骤教你如何训练你的宠物狗狗前进和后退)
IDEA和Pycharm中前进、后退功能在工具栏及快捷键的设置
PotPlayer设置前进后退时间:左右按键操作详解
汽车前进后退档位的字母是什么

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

所属分类:萌宠日常
上一篇: 【转】浏览器“后退”、“前进”或
下一篇: 3、小车前进后退左右综合实验