js:BOM(navigator对象、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>

先进入第一个页面:

 点击文字链接可以进入第二个页面:

 再次点击文字链接进入第三个页面:

 点击返回上一个页面(页面二):

 进入页面二后点击进入下一个页面按钮:

 可以再次进入页面三:

原文地址:https://www.cnblogs.com/zhai1997/p/12222550.html