如何使用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对象,这些方法帮助导航到上一页或下一页。
输出:
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 教程