BOM常用知识点

程序员文章站 2022-03-07 22:40:31

...

一、BOM

BOM是browser object model的缩写，简称浏览器对象模型。主要处理浏览器窗口和框架，描述了与浏览器进行交互的方法和接口，可以对浏览器进行访问和操作，譬如可以弹出新窗口、回退历史记录、获取URL等……..

二、BOM与DOM 的关系

javascript是通过访问BOM 对象来访问、控制、修改浏览器
BOM对象的核心是window，而window中包含了document，因此可以通过window对象的document属性就可以访问、检索、修改文档内容与结构。document又是DOM模型的根节点

因此BOM包含了DOM，浏览器提供出来给予访问的是BOM对象，从BOM对象再访问到DOM对象，进而就可以操作浏览器以及浏览器读取到的文档。

三、BOM 包含的内容
（一）window对象 表示浏览器窗口
常用的属性：
1.innerWidth/innerHeight：返回窗口显示区域的宽高(包含了滚动条的大小，而通过document.body.clientWidth、document.body.clientHeight和document.documentElement.clientWidth/clientHeight没有包含滚动条大小)
2.pageXOffset/pageYOffset：返回或设置当前页面相对于窗口显示区左上角x/y的位置
3.screenLeft/screenTop、screenX/screenY：只读整数。声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。IE、Safari、Chrome 和 Opera 支持 screenLeft
和 screenTop，而 Chrome、Firefox 和 Safari 支持 screenX 和 screenY
4.name:返回或设置窗口名称
5.parent、self 、top：分别表示获取父级、自身、*窗口的window对象
6.closed：返回窗口是否已被关闭
7.定时器：setInterval()/clearInterval() 、setTimeout()/clearTimeout()
8.open()：打开新窗口并控制其样式或查找一个已经命名的窗口
window.open(URL,name,features,replace)
注意：如果window.open(URL,’width=400,height=100‘);此时的features会被当成name，窗口会在新标签页打开跟window.open(URL,’aa’)效果一样
9.scrollBy(x,y)：按照指定的像素来滚动内容
10.scrollTo(x,y)：滚动到指定的位置
11.close()、alert()、confirm()、prompt()

(二)Navigator对象 描述了正在使用的浏览器信息
常用的属性：
1.cookieEnabled：判断是否能使用cookie
2.onLine： 判断是否脱机（有没有网络）
3.userAgent：返回由客户机发送服务器的 user-agent 头部的值。可以用来做浏览器嗅探

// 浏览器嗅探
function getBrowserInfo() {
    var nVer = navigator.appVersion,
        nAgt = navigator.userAgent,
        browser = navigator.appName,
        version = '' + parseFloat(navigator.appVersion),
        majorVersion, nameOffset, verOffset, ix, network = 'unknown';
    // Opera
    if ((verOffset = nAgt.indexOf('Opera')) != -1) {
        browser = 'Opera';
        version = nAgt.substring(verOffset + 6);
        if ((verOffset = nAgt.indexOf('Version')) != -1) {
            version = nAgt.substring(verOffset + 8);
        }
    }
    // Opera Next 
    if ((verOffset = nAgt.indexOf('OPR')) != -1) {
        browser = 'Opera';
        version = nAgt.substring(verOffset + 4);
    }
    // MSIE
    else if ((verOffset = nAgt.indexOf('MSIE')) != -1) {
        browser = 'Microsoft Internet Explorer';
        version = nAgt.substring(verOffset + 5);
    }
    // Chrome
    else if ((verOffset = nAgt.indexOf('Chrome')) != -1) {
        browser = 'Chrome';
        version = nAgt.substring(verOffset + 7);
    }
    // Safari
    else if ((verOffset = nAgt.indexOf('Safari')) != -1) {
        browser = 'Safari';
        version = nAgt.substring(verOffset + 7);
        if ((verOffset = nAgt.indexOf('Version')) != -1) {
            version = nAgt.substring(verOffset + 8);
        }
    }
    // Firefox
    else if ((verOffset = nAgt.indexOf('Firefox')) != -1) {
        browser = 'Firefox';
        version = nAgt.substring(verOffset + 8);
    }
    // MSIE 11+
    else if (nAgt.indexOf('Trident/') != -1) {
        browser = 'Microsoft Internet Explorer';
        version = nAgt.substring(nAgt.indexOf('rv:') + 3);
    }
    // WeiXin
    else if (nAgt.indexOf('NetType/') != -1) {
        browser = 'WeiXin';
        if (nAgt.indexOf('NetType/WIFI') != -1) {
            network = 'WIFI';
        } else if (nAgt.indexOf('NetType/2G') != -1) {
            network = '2G';
        } else if (nAgt.indexOf('NetType/3G+') != -1) {
            network = '3G+';
        }
        verOffset = nAgt.lastIndexOf('/')
        version = nAgt.substring(verOffset + 1);
        if (browser.toLowerCase() == browser.toUpperCase()) {
            browser = navigator.appName;
        }
    }
    // Other browsers
    else if ((nameOffset = nAgt.lastIndexOf(' ') + 1) < (verOffset = nAgt.lastIndexOf('/'))) {
        browser = nAgt.substring(nameOffset, verOffset);
        version = nAgt.substring(verOffset + 1);
        if (browser.toLowerCase() == browser.toUpperCase()) {
            browser = navigator.appName;
        }
    }
    // trim the version string
    if ((ix = version.indexOf(';')) != -1) version = version.substring(0, ix);
    if ((ix = version.indexOf(' ')) != -1) version = version.substring(0, ix);
    if ((ix = version.indexOf(')')) != -1) version = version.substring(0, ix);
    majorVersion = parseInt('' + version, 10);
    if (isNaN(majorVersion)) {
        version = '' + parseFloat(navigator.appVersion);
        majorVersion = parseInt(navigator.appVersion, 10);
    }
    // mobile version
    var mobile = /Mobile|mini|Fennec|Android|iP(ad|od|hone)/.test(nVer);
    // start system detect
    var os = '';
    var clientStrings = [
        { s: 'Windows 10', r: /(Windows 10.0|Windows NT 10.0)/ },
        { s: 'Windows 8.1', r: /(Windows 8.1|Windows NT 6.3)/ },
        { s: 'Windows 8', r: /(Windows 8|Windows NT 6.2)/ },
        { s: 'Windows 7', r: /(Windows 7|Windows NT 6.1)/ },
        { s: 'Windows Vista', r: /Windows NT 6.0/ },
        { s: 'Windows Server 2003', r: /Windows NT 5.2/ },
        { s: 'Windows XP', r: /(Windows NT 5.1|Windows XP)/ },
        { s: 'Windows 2000', r: /(Windows NT 5.0|Windows 2000)/ },
        { s: 'Windows ME', r: /(Win 9x 4.90|Windows ME)/ },
        { s: 'Windows 98', r: /(Windows 98|Win98)/ },
        { s: 'Windows 95', r: /(Windows 95|Win95|Windows_95)/ },
        { s: 'Windows NT 4.0', r: /(Windows NT 4.0|WinNT4.0|WinNT|Windows NT)/ },
        { s: 'Windows CE', r: /Windows CE/ },
        { s: 'Windows 3.11', r: /Win16/ },
        { s: 'Android', r: /Android/ },
        { s: 'Open BSD', r: /OpenBSD/ },
        { s: 'Sun OS', r: /SunOS/ },
        { s: 'Linux', r: /(Linux|X11)/ },
        { s: 'iOS', r: /(iPhone|iPad|iPod)/ },
        { s: 'Mac OS X', r: /Mac OS X/ },
        { s: 'Mac OS', r: /(MacPPC|MacIntel|Mac_PowerPC|Macintosh)/ },
        { s: 'QNX', r: /QNX/ },
        { s: 'UNIX', r: /UNIX/ },
        { s: 'BeOS', r: /BeOS/ },
        { s: 'OS/2', r: /OS\/2/ },
        { s: 'Search Bot', r: /(nuhk|Googlebot|Yammybot|Openbot|Slurp|MSNBot|Ask Jeeves\/Teoma|ia_archiver)/ }
    ];
    for (var id in clientStrings) {
        var cs = clientStrings[id];
        if (cs.r.test(nAgt)) {
            os = cs.s;
            break;
        }
    }
    var osVersion = '';
    if (/Windows/.test(os)) {
        osVersion = /Windows (.*)/.exec(os)[1];
        os = 'Windows';
    }
    switch (os) {
        case 'Mac OS X':
            osVersion = /Mac OS X (10[\.\_\d]+)/.exec(nAgt)[1];
            break;
        case 'Android':
            osVersion = /Android ([\.\_\d]+)/.exec(nAgt)[1];
            break;
        case 'iOS':
            osVersion = /OS (\d+)_(\d+)_?(\d+)?/.exec(nVer);
            osVersion = osVersion[1] + '.' + osVersion[2] + '.' + (osVersion[3] | 0);
            break;
    }
    //detect data
    var params = {};
    params.os = os;//操作系统
    params.osVersion = osVersion ? osVersion : 'unknown';//操作系统版本
    params.mobile = mobile;//是否移动端访问
    params.browser = browser;//浏览器
    params.browserVersion = version;//浏览器版本
    params.browserMajorVersion = majorVersion;//浏览器major版本
    //输出对象
    // console.log(params);
    return params;
}

(三)History对象 History 对象包含用户（在浏览器窗口中）访问过的 URL
常用方法和属性：
1.length：返回浏览器历史列表中URL数量
2.back()：加载history列表中的前一个URL
3.forward()：加载history列表中的下一个URL
4.go(n)：加载history列表中的指定的一个URL
HTML5中新增内容：
1.pushState(state, title, url) 添加一条历史记录
2.replaceState(state, title, url) 替换当前的历史记录
state：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数中。如果不需要这个对象，此处可以填null。
title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。
url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。
3.popstate 事件 当历史记录发生改变时触发
调用history.pushState()或者history.replaceState()不会触发popstate事件

(四)Location对象 包含当前有关URL的信息
常用属性和方法：
1.hash：设置或返回从井号开始URL（锚）
2.host：设置或返回主机名和端口号
3.herf：设置或返回完整的URL
4.pathname：设置或返回当前URL的路径部分
5.protocol：设置或返回当前URL的协议
6.search：设置或返回从问号（？）开始的URL部分
7.assign()：加载新的文档
8.reload(‘force’)：重新加载当前文档。参数可选，不填或者填写false则取浏览器缓存的文档
9.replace()：用新的文档替换当前文档
改变hash值不会刷新文档，所以可以用它来实现单页面应用（SPA）hash值的改变可以通过hashchange事件监听，简单demo如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .wrapper {
            width: 200px;
            height: 200px;
            border: 1px solid slateblue;
        }
        .demo1 {
            background-color: #ff22ff;
            height: 200px;
        }
        .demo2 {
            background-color: #e2ff23;
            height: 200px;
        }
        .demo3 {
            background-color: #22ffff;
            height: 200px;
        }
    </style>
</head>
<body>
    <button class="prev">prev</button>
    <button class="next">next</button>
    <div class="wrapper">
        <div class="demo1">1</div>
        <div class="demo2">2</div>
        <div class="demo3">3</div>
    </div>
    <script>
        var btnPrev = document.getElementsByClassName('prev')[0],
            btnNext = document.getElementsByClassName('next')[0],
            wrapper = document.getElementsByClassName('wrapper')[0],
            curNum, div, oDivArray;

        btnPrev.onclick = function () {
            curNum = curNum <= 1 ? 1 : (curNum - 1);
            location.hash = '#' + curNum;
        };
        btnNext.onclick = function () {
            curNum = curNum >= 3 ? 3 : (curNum + 1);
            location.hash = '#' + curNum;
        }
        function hashChange() {
            curNum = location.hash.indexOf('#') >= 0 ? parseInt(location.hash.slice(1)) : 1;
            oDivArray = wrapper.getElementsByTagName('div');
            clear();
            div = oDivArray[curNum - 1];
            div.style.display = 'block';
        }
        function clear() {
            for (var i = 0; i < oDivArray.length; i++) {
                oDivArray[i].style.display = 'none';
            }
        }
        hashChange();
        window.onhashchange = function () {
            hashChange();
        }
    </script>
</body>

</html>

(五)Screen对象 包含客户端显示屏的信息
1.width/height：返回显示屏幕的大小
2.availWidth/availHeight：返回显示屏幕的大小（除windows任务栏外）
3.colorDepth：返回目标设备或缓冲器上的调色板的比特深度
4.pixelDepth：返回显示屏幕的颜色分辨率（比特每像素）

BOM常用知识点

常用各种浏览器手动开启“禁止追踪”功能保护隐私

网络营销之APP运营推广 11个常用的APP运营指标

Android onClick按钮单击事件的四种常用写法

笔记本维修常用手法及成本大揭密

SEO优化之企业站常用的技巧有哪些

如何推广自己的网站常用的一些推广技巧

matlab中分号、冒号、逗号等常用标点符号的功能和用法总结

CAD看图软件哪款好？四款常用的CAD看图软件推荐

Python3解释器知识点总结

整理汇总Oracle常用命令方便你我他

BOM常用知识点

常用各种浏览器手动开启“禁止追踪”功能 保护隐私

网络营销之APP运营推广 11个常用的APP运营指标

Android onClick按钮单击事件的四种常用写法

笔记本维修常用手法及成本大揭密

SEO优化之企业站常用的技巧有哪些

如何推广自己的网站 常用的一些推广技巧

matlab中分号、冒号、逗号等常用标点符号的功能和用法总结

CAD看图软件哪款好？四款常用的CAD看图软件推荐

Python3解释器知识点总结

整理汇总Oracle常用命令 方便你我他

常用各种浏览器手动开启“禁止追踪”功能保护隐私

如何推广自己的网站常用的一些推广技巧

整理汇总Oracle常用命令方便你我他