zoukankan      html  css  js  c++  java
  • 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>

    先进入第一个页面:

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

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

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

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

     可以再次进入页面三:

  • 相关阅读:
    [CSP-S模拟测试]:答题(meet in the middle)
    __AFO
    BZOJ4332 JSOI2012 分零食 【倍增 + NTT】
    CF528D Fuzzy Search 【NTT】
    uoj【UNR #3】To Do Tree 【贪心】
    uoj233/BZOJ4654/洛谷P1721 [Noi2016]国王饮水记 【dp + 斜率优化】
    BZOJ2150 部落战争 【带上下界最小流】
    洛谷P4240 毒瘤之神的考验 【莫比乌斯反演 + 分块打表】
    BZOJ3235 [Ahoi2013]好方的蛇 【单调栈 + dp】
    51nod1236 序列求和 V3 【数学】
  • 原文地址:https://www.cnblogs.com/zhai1997/p/12222550.html
Copyright © 2011-2022 走看看