【JavaScript】BOM很重要

BOM很重要

一、什么是BOM？

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

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

二、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，可以则么做：

location.pathname = "blog";

    为了将查询字符串设置为?name=Steve，可以这样：

location.search = "?name=Steve";

    可以调用reload()方法重新载入页面：

location.reload();

    调用location.reload()，浏览器会从缓存那里载入页面，而不是从服务器再次请求页面。然而，如果给这个方法传递一个布尔值true，那么浏览器将直接从服务器重载页面：

location.reload(true);

   

注意：使用reload()方法，尽量在脚本内重载页面，不要通过事件触发的函数调用，后者很可能会促使一个循环条件。

4、history对象

    提供了通过访问者浏览历史向前和向后移动的方法。处于安全考虑，JavaScript不能访问浏览器所访问网站的URI。具体说，可以使用back()、forward()和go()方法。back()和forward()分别向后和向前移动一个页面。go()方法移动到参数指定的索引值。

总结：

    简单介绍几个对象，有关深入的知识有待探讨！

感谢您的阅读！