JS——BOM(History对象)
Posted Dream
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS——BOM(History对象)相关的知识,希望对你有一定的参考价值。
1、navigator对象
(1)获取浏览器的信息
navigator对象包含有关浏览器的信息,其中userAgent属性可以返回客户机发送服务器的user-agent头部的值,并据此判断打开页面的是移动端还是PC端
2、history对象
(1)概念
window提供的history对象主要负责与浏览器的历史记录进行交互,该对象包含用户访问过的url
(2)history.back(),加载历史列表中的前一个 URL
运行程序先进入此页面,点击文字链接后进入下一个页面:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <a href="History对象.html">请点击进入下一个页面</a> </body> </html>
点击返回上一级按钮可以再次回到第一个页面:
代码如下:
go():
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>History对象</title> <script> function fanhui(){ history.go(-1); } </script> </head> <body> <input type="button" value="返回上一页" onclick="fanhui()"/><br /> </body> </html>
back():
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>History对象</title> <script> function fanhui(){ history.back(); } </script> </head> <body> <input type="button" value="返回上一页" onclick="fanhui()"/><br /> </body> </html>
这两个方法是等效的。
(3) history.forward()方法,加载历史列表中的下一个 URL
先设置三个页面:
页面一:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h2>这是第一个页面</h2> <a href="2.html">我是第一个页面,请点击!</a> </body> </html>
页面二:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>History对象</title> <script> function fanhui(){ history.go(1); } </script> </head> <body> <h2>这是第二个页面</h2> <input type="button" value="进入下一个页面" onclick="fanhui()"/><br /> <a href="3.html">进入第三个页面</a> </body> </html>
当然,可以用history.forword()方法,效果是一样的。
页面三:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h2>这是第三个页面</h2> <input type="button" value="跳转到第二个页面" onclick="javascript:location.href=\'2.html\'"/> </body> </html>
先进入第一个页面:
点击文字链接可以进入第二个页面:
再次点击文字链接进入第三个页面:
点击返回上一个页面(页面二):
进入页面二后点击进入下一个页面按钮:
可以再次进入页面三:
以上是关于JS——BOM(History对象)的主要内容,如果未能解决你的问题,请参考以下文章
JavaScript-Runoob-JS 浏览器BOM:JavaScript Window History