• 中文
    • English
  • 注册
  • 查看作者
  • 12:JS关于BOM

    一. BOM

    BOM(Browser Object Model) 是指浏览器对象模型,BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。

    二.  UA

    UA意为浏览器标识,在JS中,可以使用navigator.userAgent;来获取当前浏览器的标识。

    <script type="text/javascript">
        var ua = navigator.userAgent;
        if(ua.indexOf("Chrome") != -1) {
            alert("谷歌浏览器");
        } else if(ua.indexOf("Firefox") != -1){
            alert("火狐浏览器");
        }
    </script>

    三.  history

    history用来保存历史记录浏览器历史,是BOM的内置对象,无需手动创建。history中包含用户在浏览器窗口中中访问过的 URL。History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问。

    1.  前进

    history.forward()

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>index.html</title>
    </head>
    <body>
    <a href="index2.html">跳转到2</a>
    <button onclick="history.forward()">前进</button>
    </body>
    </html>

    2.  后退

    history.back()

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>index2.html</title>
    </head>
    <body>
    <button onclick="history.back()">后退</button>
    <script type="text/javascript">
    </script>
    </body>
    </html>

    3. 具体的页面 

    可以使用history.go(number|URL)可加载历史列表中的某个具体的页面。go() 方法可加载历史列表中的某个具体的页面。比如history.go(-1)的效果等于history.back(),而和history.go(1)的效果等于history.forward(),history.go(number|URL)

    四.  Location

    Location 对象包含有关当前 URL 的信息。Location 对象是 Window 对象的一个部分,可通过 window.location 属性来访问。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript">
            window.onload = function () {
                var btn1 = document.getElementById("btn1")
                var btn2 = document.getElementById("btn2")
                var btn3 = document.getElementById("btn3")
                var btn4 = document.getElementById("btn4")
                btn1.onclick = function() {
                    location="https://google.com";
                }
                btn2.onclick = function() {
                    //不会生成历史记录
                    location.replace("https://google.com")
                }
                btn3.onclick = function () {
                    //刷新页面
                    location.reload();
                }
                btn4.onclick = function () {
                    //获取当前网址
                    alert(location);
                }
            }
        </script>
    </head>
    <body>
    <button id="btn1">跳转到谷歌</button>
    <button id="btn2">替换为谷歌</button>
    <button id="btn3">刷新</button>
    <button id="btn4">获取当前页面网址</button>
    </body>
    </html>

    山东省
  • 0
  • 0
  • 0
  • 1.1k
  • 请登录之后再进行评论

    登录

    赞助本站

    • 支付宝
    • 微信
    • QQ

    感谢一直支持本站的所有人!

    单栏布局 侧栏位置: