JavaScript(8) BOM

BOM：Browser Object Model（浏览器对象模型）

BOM 提供一组功能，以使 Javascript 可以访问控制网页内容无关的浏览器功能，虽然浏览器都支持 BOM，但是 BOM 并没有形成统一的标准，这也是前端程序员的苦恼之一。

BOM的重要对象有这些：window,location,navigator,screen,history.

window Object

-- Global

window对象是 BOM 的核心，它表示浏览器的一个实例。而对于javascript，它也是 Global 对象，所有全局定义的对象实际都是挂在window下。下面的代码说明在window下定义对象的三种方法。

//使用var定义全局变量var g_pro1 = 123;//直接在window下添加变量window.g_pro2 = 456;//直接给未定义对象赋值g_pro3 = 789;//三种定义的不同点var pro1pro = Object.getOwnPropertyDescriptor(window,"g_pro1");alert(pro1pro.configurable.toString());//falsevar pro2pro = Object.getOwnPropertyDescriptor(window,"g_pro2");alert(pro2pro.configurable.toString());//truevar pro3pro = Object.getOwnPropertyDescriptor(window,"g_pro3");alert(pro3pro.configurable.toString());//true

g_gro3 = 789;这种定义方式在 strict 模式下会报错。

-- window position

window(这里指的是浏览器window)的位置，有以下基本访问和控制方法

• window.screenLeft(有的浏览器支持window.screenX)：window距离屏幕左边界的像素，这个值也很讲究，无非是带边界不带边界，反正很烦人，下面的screenRight雷同。
• window.screenTop(有的浏览器支持window.screenY)：window距离屏幕上边界的像素。
• window.moveTo(numb1,numb2)：将window左上角移动到（numb1,numb2）位置。
• window.moveBy(numb1,numb2)：将window左移numb1个像素，下移numb2个像素。

因为BOM网页内容无关，所以可以直接打开浏览器按F12在命令行输入中测试，需要注意的是Firefox和Chrome因为什么鸟policy的原因，只有用window.open(URL)打开的窗体才可以使用position reset 的命令，而IE(我测试的版本是IE11)可以直接生效。

-- window size

window的size有以下访问控制方法

• window.outerWidth：浏览器的宽度。
• window.outerHeight：浏览器的高度。这一对属性表示的浏览器的size，所以在不在frame中访问没有影响。
• window.innerWidth：window的可显示屏幕的宽度，注意滚动条什么的是浏览器的东东，不属于window显示范围。
• window.innerHeight：window可显示屏幕的高度，同样的，状态样工具条收藏栏之类的也不属于window的显示。
• window.resizeTo(numb1,numb2)：重设浏览器的大小为(numb1,numb2)。
  
• window.resizeBy(numb1,numb2)：重设浏览器的大小，宽加上numb1，高加上numb2。

控制命令经常被浏览器禁止。比如上面的命令中，IE11下，resizeBy就被禁止了。

-- navigating and opening window

window.open()方法即能用来导航到特定的URL又能打开一个新的浏览器窗口，它有四个可选参数，依次为：

• URL：打开窗口的地址。
• window target：从何处打开。
• features：特性字符串。
• replace：一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。

window.open返回对打开窗口的引用：

var newWin = window.open("http://www.baidu.com","","height=400,width=400,top=100,left=50,location=false");

现在你可以用newWin.close()来关闭打开的窗口（此 close 方法只能运用于window.open打开的窗口）。

注意：基本所有的浏览器都会禁止自发运行的window.open()，多数浏览器都不提示（IE会提示，阻止了一个弹窗）。而用户触发的弹窗不会被阻止，比如一个按钮的onclick事件。

-- Intervals and Timeouts

我记得上大学的vb6.0院选修课，有个timer的控件，它的一个属性叫interval，我是个懒人，一直没有查它的意思，只是知道设置了它为x，那么每经过xms，timer中的代码就会执行一次。然后慢慢地我知道了它大概是什么意思。

window.setInterval(process，times)：每经过times时间间隔，执行一次process。它的返回值是一个 intervalID，可以用来取消 interval 的运行。

//刷新时间var intervalID = setInterval(function(){//我的html页面上有个元素，<a id="clock"></a>document.getElementById("clock").innerHTML=(new Date()).toString();},1000);//调用下面这个函数会终止上面的interval，你可以用一个button来调用它function destroyClock(){window.clearInterval(intervalID);}

window.setTimeout(process,times)：times时间之后，执行一次process。返回一个timeoutID，可以在时间未到之前取消它。

var timeoutId=setTimeout(function(){alert("3 minums pasts");},3000);function destroyTimeout(){clearTimeout(timeoutId);}

实际编程中，interval用的很少，基本不用。原因是在间歇调用中，假如process的时间超过了time，那么后面一个process会在前一个process结束前被调用。一个替代方案是用setTimeout来模拟间歇调用：

function IntervalSimulate(maxCycle){console.info(maxCycle);if (maxCycle) {window.setTimeout(IntervalSimulate(maxCycle-1),1000);};}IntervalSimulate(3);

-- Dialogs

有三种dialog：alert，confirm，prompt

同一个Dialog，在不同的浏览器中打开效果不一样。此对话框是操作系统或浏览器相关，与网页无关。而且在弹出的时候会阻断javascript的执行，直到dialog被关闭，才会继续执行。

还有两种浏览器的dialog，很少用：window.print ——打印对话框，window.find ——查询对话框。

Location Object

这里的location指的是定位，程序文档中 position 和 location 翻译成中文，有时会译成同样的语义，建议这些人最好不要再翻译技术文献。

location用来描述控制window对象的URL定位信息：host，hostname，href，port...

location对象并没有什么值得注意的地方，详见 http://www.w3schools.com/js/js_window_location.asp

Navigator Object

Navigator翻译成中文非常不能表达它的意义，所以我就用Navigator。它是检测浏览器本身信息、设置浏览器的对象，不同的浏览器支持的方法差异比较大，在编程时应参阅详细的文档。

比较常见的有以下属性方法：

• appCodename：浏览器的名字，比如 chrome,ie 这些。只读。
• appName：浏览器完整名称。只读。
• cookieEnabled：cookie是否可用，只读。
• javaEnabled()：java是否可用。只读。
• platform：浏览器运行在什么系统上。只读。
• plugins：浏览器上安装的插件，是个数组。只读。

下面是在chrome控制台下直接输入的命令查看plugins数组：

History Object

浏览历史。一般浏览器都有回退按钮，可以回到前面访问的网页。这些信息和动作由History控制。

history.back();//回退一步history.forward();//前进一步history.go(2);//前进两步history.go(-1);//回退一步history.length;//共有多少条记录