JavaScript之BOM基础

BOM(Browser Object Model)也叫浏览器对象，它提供了很多对象，用于访问浏览器的功能。但是BOM是没有标准的，每一个浏览器厂家会根据自己的需求来扩展BOM对象。本文主要以一些简单的小例子，简述前端开发中BOM的相关基础知识，仅供学习分享使用，如有不足之处，还请指正。

概述

window对象是最顶层的对象，旗下还有6大属性，也都是对象。document对象下也有5大属性，同样都是对象。window的属性和方法，可以采用：window.属性，或 window.方法()进行调用，或者直接调用。BOM结构图，如下所示：

window对话框

window提供的默认对话共三种：系统对话框（alert），选择对话框（confirm），输入对话框（prompt），如下所示：

 //系统对话框
 alert('Hello world!!!'); //弹出一个对话框，只有一个确定按钮，没有返回值。
 //选择对话框，有两个按钮，确定和取消。本身可以返回bool类型的结果，如果确定，返回true，否则返回false
 document.writeln( confirm('Are you sure ?'));//点确定，输出true ；取消，输出：false
 //输入框，需要用户输入值，输入的数据类型不限
 document.writeln(prompt('Plese input a value:',''));//点确定：返回输入的值；点取消，返回null。

打开窗口

通过调用window.open方法，打开新的窗口。open方法共3个参数：1、新窗口的URL 2、窗口名称或目标 3、设置窗口属性 。如下所示：

 window.open('http://www.baidu.com'); //打开新窗口
 window.open('http://www.baidu.com','baidu');//新打开窗口的名称，凡是打开相同名称的窗口，则会原有窗口中重新加载。
 window.open('http://www.baidu.com','_black');//在新窗口中打开并加载,也是只会打开一个
 window.open('http://www.baidu.com','_parent');//在本窗口中加载

第三个参数，是窗口的一些特征，如宽，高，坐标，等。用逗号隔开。如下所示：

 var box=window.open('http://wwww.baidu.com','baidu','width=400,height=400,top=100,left=100,location=yes');
 document.writeln(box);//输出：[object Window] 即，open默认返回子窗口的window对象。
 box.alert('show!!!');//由于跨域，则默认浏览器拒绝访问
 var box=window.open('index.html','baidu','width=400,height=400,top=100,left=100,location=yes');
 box.alert('show!!!');//不跨域，则可以访问
 window.opener.document.writeln('访问父窗口');//通过window.opener访问父窗口

open方法默认返回新窗口的window对象，可以通过返回值来访问子窗口内容。

窗口的位置

用于获取和设置窗口的位置（左上角的起始坐标），主要通过screenLeft、screenTop和screenX、screenY来访问，如下所示：

 document.writeln(window.screenLeft);//左边坐标，此属性firefox不支持
 document.writeln(window.screenTop);//上边坐标，此属性firefox不支持
 document.writeln(window.screenX);//左边坐标，此属性firefox支持,IE9以上也支持
 document.writeln(window.screenY);//上边坐标，此属性firefox支持,IE9以上也支持

以上属性有的浏览器不支持，可以判断返回值是否是number类型来区分，如下所示：

 var left=typeof window.screenLeft=='number'?window.screenLeft:window.screenX;
 var top=typeof window.screenTop=='number'?window.screenTop:window.screenY;
 document.writeln('left='+left+',top='+top);//输出：left=0,top=109 

窗口大小

窗口的大小，主要通过innerWidth、innderHeight和outerWidth、outerHeight来设置和获取。如下所示：

 document.writeln(window.innerWidth);//,IE9以上也支持 内窗口显示区大小
 document.writeln(window.innerHeight);//,IE9以上也支持 内窗口显示区大小
 document.writeln(window.outerWidth);//,IE9以上也支持 ，外窗口整体大小，包含工具栏和边框
 document.writeln(window.outerHeight);//,IE9以上也支持，外窗口整体大小，包含工具栏和边框
 document.writeln(document.documentElement.clientWidth);//获取document的宽度 和innderWidth效果一样            
 document.writeln(document.documentElement.clientHeight);//获取document的高度 和innderHeight效果一样        

如何跨浏览器获取窗口大小，可以通过document.compatMode判断浏览器的模式，如下所示：

 var width=window.innerWidth;
 var height=window.innerHeight;
 if(typeof width !='number'){
     if(document.compatMode=='CSS1Compat'){
         //如果就标准模式
         width=document.documentElement.clientWidth;
         height=document.documentElement.clientHeight;
     }else{
         width=document.body.clientWidth;
         height=document.body.clientHeight
     }
 }
 document.writeln('width='+width+',height='+height);//输出：width=1366,height=620 

窗口的移动和重置大小

通过moveTo、moveBy和resizeTo、resizeBy来设置窗口的大小和移动位置，如下所示：

 window.moveTo(100,100);//移动到某个位置，目前都不支持，不起作用
 window.moveBy(10,10);//每次刷新移动多少位置，目前都不支持，不起作用
 window.resizeTo(300,300);//调整窗口大小，第一次打开起作用，后面再刷新不起作用
 window.resizeBy(10,10);//重新设置窗口的大小，目前不起作用

window定时器

window的定时器一共有两种：1、超时操作（setTimeOut） 2、间歇操作（setTimeInterval）。

超时操作：第一个参数：可以执行的代码块字符串，第二个参数：超时时间，单位毫秒。如下所示：

 //超时操作：第一个参数：可以执行的代码块字符串，第二个参数：超时时间，单位毫秒
 setTimeout('alert("hello js!!!")',2000);
 //但是不建议上述写法：不容易扩展，容易出错。可以采用如下方法：
 function box(){
     alert('hello js !!!');
 }
 setTimeout(box,2000);

但是上述方法就分开的，不是一个整体，推荐采用如下方式优化：

 var box= setTimeout(function() {
     alert('hello js !!!');
 }, 2000);//推荐写法：扩展性好，封装性也好
 //box表示超时执行的id
 document.writeln(box);
 clearTimeout(box);//可以取消超时调用执行计划

备注：超时操作通过clearTimeout来取消操作，参数为超时操作返回的id。

间歇调用，可以重复执行,定时执行，如下所示：间隔200毫秒，输出1到5。

 var num=0;
 var max=5;
 function bb(){
     num++;
     //document.writeln(num);//不可以用wirteln
     document.getElementById('A01').innerText=num;
     if(num==max){
         clearInterval(box);
     }
 }
 var box = setInterval(bb,200);

上述例子，也可以通过超时调用，模拟间歇调用，如下所示：

 var num=0;
 var max=5;
 var box=0;
 function bb(){
     num++;
     //document.writeln(num);//不可以用wirteln
     document.getElementById('A01').innerText=num;
     if(num==max){
         clearTimeout(box);
     }else{
         box=setTimeout(bb,200);
     }
 }
 box = setTimeout(bb,200);

location对象

javascript中location地址对象描述的是某一个窗口对象所打开的地址。如下所示：

 document.writeln(window.location);//返回当前的路径
 document.writeln(document.location);//返回当前的路径
 window.location.hash="#66";//设置锚点，会跳转到新的页面，#可以不带，会默认带上
 document.writeln(window.location.hash);//返回路径的锚点，#66
 //端口
 document.writeln(window.location.port);//返回当前访问的路径的端口
 window.location.port=8888;//如果设置端口，则会跳转到对应的端口
 document.writeln(window.location.search);//返回路径中？后面的信息，如：?__hbt=1581605601724
 window.location.assign('http://www.baidu.com');//可以实现跳转到指定的url功能
 window.location.href='http://www.baidu.com'; //同样可以跳转

重新加载，通过reload来实现，如下所示：

 window.location.reload();//进行重新加载，可能是从缓存中加载
 window.location.reload(true);//强制从后台加载
 window.location.replace('http://www.baidu.com');//在当前页面替换当前url到新的url并重新加载的方法

history对象

主要用于访问历史记录，如：前进、后退、跳转等，如下所示：

 document.writeln(window.history.length);//返回历史记录的属性
 window.history.back();//往后退
 window.history.forward();//前进
 window.history.go(-1);//跳转到指定的页数，负数往后退，正数往前进

navigator对象

navigator对象包含访问者客户端的相关信息，且navigator对象的实例的唯一的，如下所示：

 document.writeln(window.navigator.appName);//完整浏览器名称，IE输出：Netscape ,不能精确的输出浏览器
 document.writeln(window.navigator.userAgent);
 //http头代理名称，IE输出：Netscape Mozilla/5.0 (Windows NT 6.1; Win64; x64; Trident/7.0; .NET CLR 2.0.50727; SLCC2; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E; rv:11.0) like Gecko
 document.writeln(window.navigator.platform);//浏览器操作系统的平台，输出：Win64
 //插件列表
 document.writeln(window.navigator.plugins.length);//插件个数

通过navigator对象输出浏览器的插件信息，如下所示：

 for(var i=0;i<window.navigator.plugins.length;i++){
     document.writeln('插件名称：'+window.navigator.plugins[i].name);
     document.writeln('插件文件名：'+window.navigator.plugins[i].filename);
     document.writeln('插件描述：'+window.navigator.plugins[i].description);
     document.writeln('插件版本'+window.navigator.plugins[i].version);
     document.writeln('<br />');
 }

浏览器支持的MIME类型，如下所示：

 document.writeln(window.navigator.mimeTypes.length);//4
 for(var i=0;i<window.navigator.mimeTypes.length;i++){
     document.writeln(' mime名称：'+window.navigator.mimeTypes[i].type);
     document.writeln(' mime描述：'+window.navigator.mimeTypes[i].description);
     document.writeln(' mime后缀：'+window.navigator.mimeTypes[i].suffixes);
     document.writeln('<br />');
 }

备注

至于其他浏览器对象，用到的不是很多，暂不介绍。

生命赋予了我们灵魂，却没有教会我们如何走，关于情感的路，需要的是两个人风雨同舟。