前端BOM操作常用命令詳解及代碼案例

更新時間：2024年10月26日 11:43:38 作者：TechFrontRunner

瀏覽器對象模型(BOM)是瀏覽器提供的JavaScript操作瀏覽器的API,提供了與網頁無關的瀏覽器功能對象,這篇文章主要給大家介紹了關于前端BOM操作常用命令詳解及代碼案例的相關資料,需要的朋友可以參考下

前言

BOM（Browser Object Model）是瀏覽器對象模型，是瀏覽器提供的JavaScript操作瀏覽器的API。BOM提供了與網頁無關的瀏覽器的功能對象，雖然沒有正式的標準，但現(xiàn)代瀏覽器已經幾乎實現(xiàn)了JavaScript交互性方面的相同方法和屬性，因此常被認為是BOM的方法和屬性。本文將詳細介紹BOM操作中的常用命令，并通過代碼案例進行解釋。

1. 獲取瀏覽器窗口尺寸

獲取可視窗口寬度：window.innerWidth
獲取可視窗口高度：window.innerHeight

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var m1 = window.innerWidth;
        var m2 = window.innerHeight;
        console.log(m1);
        console.log(m2);
    </script>
</body>
</html>

2. 瀏覽器的彈出層

提示框：window.alert('提示信息')
詢問框：window.confirm('提示信息')
輸入框：window.prompt('提示信息', '默認值')

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // window.alert('你好!')
        // var res = window.confirm('你好嗎?')
        // console.log(res)
        var res2 = window.prompt('你是哪個省的?');
        console.log(res2);
    </script>
</body>
</html>

3. 開啟和關閉標簽頁

開啟：window.open('地址')
關閉：window.close()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="on">開啟</button>
    <button id="off">關閉</button>
    <script>
        var on = document.getElementById('on');
        var off = document.getElementById('off');
        on.onclick = function() {
            window.open('https://www.baidu.com/');
        }
        off.onclick = function() {
            window.close();
        }
    </script>
</body>
</html>

4. 瀏覽器常見事件

資源加載完畢：window.onload = function() {}
可視尺寸改變：window.onresize = function() {}
滾動條位置改變：window.onscroll = function() {}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="圖片鏈接" alt="">
    <script>
        window.onload = function() {
            console.log('資源已經加載完畢');
        }
        window.onresize = function() {
            console.log('可視尺寸改變');
        }
        window.onscroll = function() {
            console.log('滾動條位置改變');
        }
    </script>
</body>
</html>

5. 瀏覽器的歷史記錄操作

回退頁面：window.history.back()
前進頁面：window.history.forward()
跳轉到指定頁面：window.history.go(n)，其中n可以是負數(shù)（表示后退）或正數(shù)（表示前進）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="goBack()">回退</button>
    <button onclick="goForward()">前進</button>
    <button onclick="goToPage(-2)">回退兩頁</button>
    <script>
        function goBack() {
            window.history.back();
        }
        function goForward() {
            window.history.forward();
        }
        function goToPage(n) {
            window.history.go(n);
        }
    </script>
</body>
</html>

6. 瀏覽器卷去的尺寸和滾動

卷去的高度：document.documentElement.scrollTop 或 window.scrollY
卷去的寬度：document.documentElement.scrollLeft 或 window.scrollX
滾動到指定位置：window.scrollTo(left, top) 或 window.scrollTo({left: xx, top: yy, behavior: 'smooth'})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            width: auto;
            height: 3000px;
        }
        button {
            position: fixed;
            bottom: 50px;
            right: 50px;
        }
    </style>
</head>
<body>
    <button id="go">傳送</button>
    <script>
        var go = document.getElementById('go');
        go.onclick = function() {
            window.scrollTo({left: 300, top: 400, behavior: "smooth"});
        }
    </script>
</body>
</html>

7. Navigator對象

Navigator對象包含有關瀏覽器的信息。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        console.log('瀏覽器品牌', navigator.appName);
        console.log('瀏覽器版本', navigator.appVersion);
        console.log('用戶代理', navigator.userAgent);
        console.log('操作系統(tǒng)', navigator.platform);
    </script>
</body>
</html>