BOM

最新推荐文章于 2024-04-26 13:28:10 发布

Liuqh233

最新推荐文章于 2024-04-26 13:28:10 发布

阅读量175

点赞数

文章标签： bom

本文链接：https://blog.csdn.net/qq_41840644/article/details/96829055

版权

二、BOM 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、BOM对象包含的内容

BOM: Brower Object Model，简称浏览器对象模型

window JavaScript层级中的顶级对象，表示浏览器窗口
Navigator 包含了客户端浏览器的信息
History 包含了浏览器窗口访问过的URL

Location 包含了当前URL的信息
Screen 包含了客户端显示屏的信息

二、Window对象

1.window对象属性

属性	作用
innerHeight	返回窗口的文档显示区的高度
innerWidth	返回窗口的文档显示区的宽度

innerHeight 和 innerWidth 他返回的是你网页展示的区域的大小,即视口的区域大小（存在兼容性问题，IE8及其以下不兼容）
document.documentElement.clientHeight 和 clientWidth 也是返回视口的尺寸（标准模式下任何浏览器都兼容）
document.body.clientWidth/clientHeight（适用于怪异模式下的浏览器）该属性在标准模式下返回的是设置的body的实际宽高，只有在怪异模式下才会返回视口的大小。

属性	作用
scrollTo	设置滚动条移动的距离，参数一为X轴距，参数二维Y轴距
scrollBy	设置滚动条移动的距离，参数一为X轴距，参数二维Y轴距（在原有的基础上滚动）

我们需要区分的是scrollTo(x,y)是每次将滚动条移动到（x，y）点
scrollBy(x,y)是在原有移动的基础上再次移动（原有x+x，原有y+y）的距离

属性	作用
pageXOffset	设置或返回当前页面相对于窗口显示区左上角的X位置。（IE8及以下不兼容）
pageYOffset	设置或返回当前页面相对于窗口显示区左上角的Y位置。
scrollX	设置返回滚动条移动的横向距离
scrollY	设置返回滚动条移动的纵向距离

pageXOffset 属性是 scrollX 属性的别名,为了跨浏览器兼容性，请使用 window.pageXOffset 代替 window.scrollX。
window.pageXOffset == window.scrollX; // 总是 true
该属性和scroll一样也是返回的是滚动条的距离，但是我们需要注意的是，虽然她和ScrollX一样都可以设置值，但是设置了值之后他并不会有效果，仅仅是设置了值
查看滚动条的距离还有两个方法，document.body/documentElement.scrollLeft/scrollTop,只是这两个方法存在兼容性混乱的问题，就是当document.body.scrollLeft可以返回横向滚动的距离时，那么document.documentElement.scrollleft就会返回0，因此我们在做兼容性写法的时候。常常将两个属性相加： x = document.body.scrollLeft + document.documentElement.scrollleft。

属性	作用
parent	返回子窗口的父窗口
top	返回该窗口的最顶级窗口

当你使用<iframe src="./children.html" frameborder="10"></iframe>在网页中引入一个子网页的话，那么网页1就是子网页的父级网页
在这里我们需要注意一个问题，就是在全局环境下我们声明变量时，要尽量避免声明top，parent这些保留字，因为你在全局环境下声明，很可能操作的是window下的这样一个属性。

属性	作用
screenX	只读整数。声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。
screenY
screenTop
screenLeft

IE、Safari、Chrome 和 Opera 支持 screenLeft
和 screenTop，而 Chrome、Firefox 和 Safari 支持 screenX 和 screenY。

#### 2.window对象方法 | 方法 | 作用 | | :------------ | -----------------------------------------------------------------------------------: | | setInterval | 设置定时器（每隔一段时间就会触发处理事件） | | setTimeout | 设置定时器（延迟一段时间才会触发事件） | | cleanInterval | 清除定时器 | | cleanTimeout | 清除定时器 | | open | 打开一个新的浏览器窗口或查找一个已命名的窗口。window.open(URL,name,features,replace) | | close | 关闭浏览器窗口 |

### 三、Navigator对象 > Navigator 对象包含的属性描述了正在使用的浏览器。可以使用这些属性进行平台专用的配置。虽然这个对象的名称显而易见的是 Netscape 的 Navigator 浏览器，但其他实现了 JavaScript 的浏览器也支持这个对象。 #### 1. navigator 对象属性

方法	作用
online	返回指明系统是否处于脱机模式（是否联网）的布尔值。常用来做离线缓存的判断条件
cookieEnabled	返回指明浏览器中是否启用 cookie 的布尔值。
userAgent	返回由客户机发送服务器的 user-agent 头部的值。

userAgent 返回的值：
“Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.131 Safari/537.36”
我们常用此值来做浏览器嗅探

点击查看详细内容

-浏览器嗅探代码

  
 // 
        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);

四、History对象

1.history对象属性

History 对象包含用户（在浏览器窗口中）访问过的 URL

属性	作用
lenght	返回浏览器历史列表中的URL数量

#### 2.history对象方法 | 方法 | 作用 | | :---------- | ---------------------------------------------------------------------------------------------: | | back（） | 加载 history 列表中的前一个 URL。 | | forward（） | 加载 history 列表中的下一个 URL。。 | | go（） | 加载 history 列表中的某个具体页面。参数为数值，正值为下N个页面，负为前N个页面，0是刷新当前页面 |

### 五、Location对象 > Location 对象包含有关当前 URL 的信息。 ```javascript //域名 HTTPS使用端口443，HTTP使用的端口是80 https://www.baidu.com //路径 /s //参数 ?ie=utf-8&f=8&rsv_bp=1&tn=baidu&wd=nba&oq=markdown%25E6%2580%258E%25E4%25B9%2588%25E4%25BB%25A3%25E7%25A0%2581%25E6%258A%2598%25E5%258F%25A0&rsv_pq=dbfa6388001a16eb&rsv_t=562bnZuR%2FQ1DjrmRVjp4IQo5IExNhjytYVQD426aShEjDIB4Hkou1Y2hwzg&rqlang=cn&rsv_enter=1&rsv_sug3=3&rsv_sug1=2&rsv_sug7=100&rsv_sug2=0&rsv_dl=tb&inputT=489&rsv_sug4=490 //锚点 #1

#### 1. Location对象属性
| 属性     |                                                      作用 |
| :------- | --------------------------------------------------------: |
| hash     | 设置或返回从井号 (#) 开始的 URL（锚）（可以用来做单页面） |
| host     |                               设置或返回主机名的URL端口号 |
| href     |                                   设置或返回完整的url地址 |
| pathname |                               设置或返回当前url的路径部分 |
| protocol |                                 设置或返回当前 URL 的协议 |
| search   |               设置或返回从问号 (?) 开始的 URL（查询部分） |
#### 2.Location 对象方法
| 属性            |                                                            作用 |
| :-------------- | --------------------------------------------------------------: |
| assign()        |                                                  加载新的文档。 |
| reload(‘force’) | 重新加载当前文档。参数可选，不填或填 false 则取浏览器缓存的文档 |
| replace()       |                                        用新的文档替换当前文档。 |

Liuqh233

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BOM

一、BOM对象包含的内容BOM: Brower Object Model，简称浏览器对象模型window JavaScript层级中的顶级对象，表示浏览器窗口Navigator 包含了客户端浏览器的信息History 包含了浏览器窗口访问过的URLLocation 包含了当前URL的信息Screen 包含了客户端显示屏的信息二、Window对象1.w...
复制链接

扫一扫

专栏目录