【JavaScript】BOM很重要

女爷i 2022-07-14 07:21 254阅读 0赞

**BOM很重要**

# **一、什么是BOM？** #

浏览器对象模型（Browser Object Model），提供了独立于内容而与浏览器窗口进行交互的对象，由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window。

它由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。但BOM缺乏标准，JavaScript语法标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。

![Center][]

# **二、BOM基础**    #

## 1、获取屏幕信息 ##

screen对象提供获取访问者屏幕信息的方法。这些信息可用来确定显示哪个图像或页面有多大。无论是否使用screen对象，都需要创建一个好的基于CSS的设计以便能优雅地处理各种大小的屏幕。

screen对象的可用属性：

*  availHeight

*  availWidth

*  colorDepth

*  height

*  width

availHeight/availWidth属性和height/width属性间有什么不同？

availHeight/availWidth属性返回屏幕的可用高度和宽度，即减去了任务栏这样的控件所使用的空间。height/width属性返回总的高度和宽度。

## 2、使用navigator对象 ##

使用浏览器检测技术是为了使浏览器特定的JavaScript代码能够运行。当使用navigator对象检测访问者浏览器时，会遇到一个问题，因为有太多的浏览器，web开发人员可能需要花费太多的时间跟踪哪个浏览器支持哪种函数并尽量在代码中考虑这些浏览器。然而navigator对象并非一无是处，仍然有用。

检测java：

if(navigator.javaEnabled()){
    
        alert("Java is enabled");
    
    }else{
    
        alert("Java is not enabled");
    
    }

用navigator的userAgent属性，返回的字符串包含有关用户浏览器的信息，不同浏览器报告不同的字符串信息，该字符串通常会随着浏览器新版本的发布而改变，如果你试图跟踪每个浏览器的每个已发布的版本，然后试图跟踪每个浏览器的哪个版本支持JavaScript的哪个功能，你将会花费很长时间来维护那张列表。

跟踪访问者浏览器支持什么，不支持什么的更好办法是功能测试。

功能测试两种方法：

（1）typeof操作符

尝试一个例子。为了测试getElementById()方法的存在性，可以这样写：

if(typeof document.getElementById != "undefined"){
    
        alert("getelembyid is supported");
    
    }else{
    
        alert("no getelembyid support");
    
    }

当忽略typeof的时候，被测试的方法或属性可能会默认返回0或false，则测试失败。因此使用typeof测试更安全、可靠。

（2）三元操作符

用该操作符在代码前面设置一个标志。后面运行的脚本使用标准的if条件检查该标志：

var getElem = (typeof document.getElementById == "function") ? true : false;
    
    if(getElem){
    
    }

##     ##

## 3、location对象 ##

location对象是我们能够访问当前载入的URI（统一资源标识符），包括任何有关查询字符串、使用的协议以及其他相关组件的信息。

重定向到我的网站：

location.assign("http://www.braingia.org");

调用assign()方法与设置href属性基本一样：

location.href = "http://www.braingia.org";

还可以改变location对象的其他属性，比如端口、查询字符串或路径。为了将路径设置为blog，可以则么做：