當前位置：首頁 > 網絡編程 > JavaScript > 詳細頁面

瀏覽器對象模型“BOM”，對瀏覽器窗口進行訪問和操作

時間：2020-02-06來源：電腦系統城作者：電腦系統城

location對象

location.href url地址

location.hash 錨點

location.hostname 主機名（需要放到服務器上）

location.host 主機名+端口號（需要放到服務器上）

location.pathname 目錄或者文件

location.port 端口

location.protocol 協議

location.search ？后面的內容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
        p{
            height:100%;
            height:2000px;
            background:#abcdef;
        }
    </style>
    <script>
        window.onload=function(){

            console.log(location.href);//file:///C:/Users/96579/Desktop/index.html
            console.log(location.hash);//#top
            console.log(location.host);
            console.log(location.hostname);
            console.log(location.pathname);///C:/Users/96579/Desktop/index.html
            console.log(location.port);
            console.log(location.protocol);//file:
            console.log(location.search);//?id=1

        }    
    </script>
</head>
<body>
    <a id="top">這是頂部</a>
    <p>這是我的頁面</p>
    <a href="#top"><button>回到頂部</button></a>
</body>
</html>

利用js控制location.hash ，跳轉到某個錨點

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
        p{
            height:100%;
            height:2000px;
            background:#abcdef;
        }
    </style>
    <script>
        window.onload=function(){

            var btn=document.getElementById("btn");
            btn.onclick=function(){
                location.hash="#top";
            }

        }    
    </script>
</head>
<body>
    <a id="top">這是頂部</a>
    <p>這是我的頁面</p>
    <button id="btn">回到頂部</button>
</body>
</html>

location.href=url 切換頁面url，會有歷史記錄

window.location=url 切換頁面url，會有歷史記錄

location.replace(url) 切換頁面url，沒有歷史記錄

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
        p{
            height:100%;
            height:2000px;
            background:#abcdef;
        }
    </style>
    <script>
        window.onload=function(){

            setTimeout(function(){
                location.href="new.html";
            },1000);

        }    
    </script>
</head>
<body>

    <p>這是我的頁面</p>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
        p{
            height:100%;
            height:2000px;
            background:#abcdef;
        }
    </style>
    <script>
        window.onload=function(){

            setTimeout(function(){
                location.replace("new.html");
            },1000);

        }    
    </script>
</head>
<body>

    <p>這是我的頁面</p>

</body>
</html>

location.reload() 重新加載頁面（有可能從緩存中加載）

location.reload(true) 重新加載頁面（強制從服務器重新加載）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script>
        window.onload=function(){

            var reload=document.getElementById("reload");
            reload.onclick=function(){
                location.reload();//有可能從緩存中刷新
                location.reload(true);//強制從服務器重新加載
            }
        }    
    </script>
</head>
<body>

    <button id="reload">刷新</button>
</body>
</html>

history對象

history.back() 后退一步

history.go(-1) 后退一步

history.go(-n) 后退n步

history.forward() 前進一步

history.go(1) 前進一步

history.go(n) 前進n步

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
        a{
            color:orange;
        }
        a.active{
            color:red;
        }
        button{
            background:#abcdef;
            width:200px;
            height:50px;
            line-height:50px;
            text-align: center;
            border-radius:5px;
            cursor:pointer;
            margin:20px 0;
        }
    </style>
    <script>
        window.onload=function(){

            var back=document.getElementById("back");
            var back1=document.getElementById("back1");
            var back2=document.getElementById("back2");
            back.onclick=function(){
                history.back();
            }
            back1.onclick=function(){
                history.go(-1);
            }
            back2.onclick=function(){
                history.go(-2);
            }
        }    
    </script>
</head>
<body>
    <div>
        <a href="index1.html" class="active">index1.html</a> | 
        <a href="index2.html">index2.html</a> | 
        <a href="index3.html">index3.html</a>
    </div>

    <button id="back">后退一步 history.back()</button>
    <button id="back1">后退一步 history.go(-1)</button>
    <button id="back2">后退兩步 history.go(-2)</button>
    <br>
    <button id="forward">前進一步 history.forward()</button>
    <button id="forward1">前進一步 history.go(1)</button>
    <button id="forward2">前進兩步 history.go(2)</button>
</body>
</html>

補充，在原生js中，可以直接使用id獲取元素

如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>new</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script>
        window.onload=function(){
            console.log(box);
        }
        
    </script>
</head>
<body>
    <div id="box"></div>
</body>
</html>

screen 對象

screen.availWidth 屏幕可用寬度

screen.availHeight 屏幕可用高度（去除底部任務欄）

window.innerWidth 窗口可見寬度

window.innerHeight 窗口可見高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script>
        window.onload=function(){

            console.log("screen.availWidth:"+screen.availWidth);
            console.log("screen.availHeight:"+screen.availHeight);
            console.log("window.innerWidth:"+window.innerWidth);
            console.log("window.innerHeight:"+window.innerHeight);

        }    
    </script>
</head>
<body>

</body>
</html>

IE瀏覽器不支持console.log

navigator 對象

navigator.userAgent 獲取瀏覽器相關信息

控制臺的移動端設備可以編輯新增

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script>
        window.onload=function(){

            function getBrowser(){
                var explorer=navigator.userAgent.toLowerCase();

                if(explorer.indexOf("msie")>-1){
                    return "IE8~10（低版本IE）";
                }else if(explorer.indexOf("trident")>-1){
                    return "高版本IE或者edge瀏覽器";
                }else if(explorer.indexOf("chrome")>-1){
                    return "chrome";
                }else if(explorer.indexOf("firefox")>-1){
                    return "firefox";
                }else if(explorer.indexOf("opera")>-1){
                    return "opera";
                }else if(explorer.indexOf("safari")>-1){
                    return "safari";
                }else{
                    return "未知瀏覽器";
                }
            }
            var myBrowser=getBrowser();
            alert(myBrowser);
        }    
    </script>
</head>
<body>

</body>
</html>