JavaScript Window History是什么及怎么用

发布时间:2022-05-20 11:38:18 作者:iii
来源:亿速云 阅读:303

本篇内容介绍了“JavaScript Window History是什么及怎么用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

一、前言

window.history 对象可以不用窗口window前缀编写。为了保护用户的隐私,有限制的JavaScript可以访问此对象。

history.back() - 与点击浏览器中的back按钮相同。

history.forward() - 与点击浏览器中的forward按钮相同。

二、history对象

window.history对象包含浏览器会话历史记录,在当前框架或窗口中访问的所有页面的列表,window.history可以编写没有窗口前缀的对象。

但是,为了保护用户的隐私,JavaScript如何访问此对象存在一些限制。window.history 对象包含浏览器历史记录。

三、获取访问的页面数

该history.length属性返回浏览器会话历史记录中当前窗口的页面数,还包括当前加载的页面。

var result = history.length; // 返回当前会话历史记录的大小

完整代码:

<!DOCTYPE html> <html> <title>项目</title>  <body style="background-color: aqua;">  <p>历史记录列表中的URL数:</p>  <p id="para"></p>  <p> <b>注意:      </b>本示例在新框架中打开,并将被视为新的"会话":</p>  <script> var result = history.length; document.getElementById("para").innerHTML = result; </script>  </body> </html>

可以使用此属性来找出用户在当前浏览器会话期间访问了多少页面。

JavaScript Window History是什么及怎么用

1. 返回上一页

该history.back()方法将历史记录列表中的上一个URL加载。

这与在浏览器中单击“后退按钮”相同。

<!DOCTYPE html> <html> <title>项目</title>  <body style="background-color: aqua">  <button onclick="history.back();">Go Back</button>  <p><b>Note:</b> 单击此处的“后退”按钮将不会执行任何操作,因为历史记录列表中没有先前的URL</p>  </body> </html>

上面的代码将显示以下输出。

JavaScript Window History是什么及怎么用

2. 前进到下一页

该history.forward()方法将在历史记录列表中加载下一个URL。

这与在浏览器中单击“转发按钮”相同。

<!DOCTYPE html> <html> <title>项目</title>  <body style="background-color: aqua;">  <button onclick="history.forward();">前进</button>  <p> <b>注意:</b>单击此处的"前进"按钮将不会执行任何操作,因为历史记录列表中没有下一个URL:</p>  </body> </html>

上面的代码将显示以下输出(如果历史记录列表中不存在下一页,则此示例将不起作用):

JavaScript Window History是什么及怎么用

3. 转到特定页面

可以使用history.go()方法从会话历史记录中加载特定页面。

此方法将整数作为参数,负整数在历史记录中向后移动,正整数在历史记录中向后移动。

<!DOCTYPE html> <html> <title>项目</title>  <body style="background-color: aqua;">  <button onclick="history.go(-2);">回退第2页</button>  <p> <b>注意:</b>单击此处的"回退第2页"按钮将不会执行任何操作,因为历史记录列表中没有先前的URL。</p>  </body> </html>

上面的代码将显示以下输出:

JavaScript Window History是什么及怎么用

“JavaScript Window History是什么及怎么用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!

推荐阅读:
  1. JavaScript中BOM有什么用
  2. JavaScript常用内置对象是什么

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

javascript window history

上一篇:钉钉小程序web-view怎么内嵌H5页面并实现通信

下一篇:javascript中如何实现定时跳转页面

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》