浏览器对象模型 BOM

BOM（ Brower Object Model，浏览器对象模型），用于管理窗口及窗口间的通讯，其核心对象是 window。

window 是 BOM 的核心对象，表示浏览器的一个实例。称其窗口，可能并不准确，因为，浏览器窗口可能包含多个标签页，每个标签页都有 window对象。同时，window 对象又具有双重角色：

它既是通过 JS 访问浏览器的一个接口，又是 ES 规定的 global （全局）对象？！

// 所有在全局作用域中声明的变量、函数都会成为 window 对象的属性和方法。 // 注，全局变量不能通过delete操作符删除，而直接定义在window对象上定义的属性可以。 var age = 29; function sayAge(){ alert(this.age); } alert(window.age); // 29 sayAge(); // 29 window.sarAge(); // 29

1
2
3
4
5
6
7
8
9

// 所有在全局作用域中声明的变量、函数都会成为 window 对象的属性和方法。
// 注，全局变量不能通过delete操作符删除，而直接定义在window对象上定义的属性可以。
   var age = 29;
   function sayAge(){
alert(this.age);
   }
   alert(window.age);    // 29
   sayAge();    // 29
   window.sarAge();    // 29

同时，BOM 也提供了很多其他对象，用于访问浏览器的功能（这些功能与任何网页内容无关）

~~navigator？↓ （浏览器基本信息）~~

location？↓ （浏览器定位和导航 - URL）

~~history？↓ （浏览器窗口历史 history.go(n)）~~

~~screen？↓ （屏幕（显示器）信息 screen.width、screen.height）~~

window 浏览器窗口（大小、位置、开关、对话框）

[1] ~~窗口大小（获取、调整）~~

[1-1] 获取

outerWidth 和 outerHeight：用于表示浏览器窗口本身的尺寸，但IE8-浏览器不支持。

document.body.innerHTML = 'outerWidth:' + window.outerWidth + ';outerHeight:' + window.outerHeight; chrome 返回 outerWidth:1920;outerHeight:1030 IE9+ 和 firefox 返回 outerWidth:1550;outerHeight:838 safari 返回 outerWidth:1552;outerHeight:840

1
2
3
4
5

document.body.innerHTML = 'outerWidth:' + window.outerWidth + ';outerHeight:' + window.outerHeight;

   chrome 返回   outerWidth:1920;outerHeight:1030
   IE9+ 和 firefox 返回   outerWidth:1550;outerHeight:838
   safari 返回   outerWidth:1552;outerHeight:840

innerWidth 和 innerHeight：表示页面大小，即浏览器窗口尺寸减去浏览器边框及菜单、地址栏等的宽高。

document.body.innerHTML = 'innerWidth:' + window.innerWidth + ';innerHeight:' + window.innerHeight; chrome返回 innerWidth:1920;innerHeight:971 IE9+返回 innerWidth:1536;innerHeight:768 firefox返回 innerWidth:1536;innerHeight:755 safari返回 innerWidth:1536;innerHeight:764 // 若页面中存在框架，iframe也有window属性，框架中的innerWidth和innerHeight属性指的是框架本身的innerWidth和innerHeight属性。

1
2
3
4
5
6
7
8

document.body.innerHTML = 'innerWidth:' + window.innerWidth + ';innerHeight:' + window.innerHeight;

   chrome返回   innerWidth:1920;innerHeight:971
   IE9+返回   innerWidth:1536;innerHeight:768
   firefox返回   innerWidth:1536;innerHeight:755
   safari返回   innerWidth:1536;innerHeight:764

// 若页面中存在框架，iframe也有window属性，框架中的innerWidth和innerHeight属性指的是框架本身的innerWidth和innerHeight属性。

[1-2] 调整

resizeTo()和resizeBy()方法：可以用来调整浏览器窗口的大小，但只有IE和safari浏览器支持。

resizeTo()接收两个参数：浏览器窗口的新宽度和新高度。

<div id="myDiv">点击此处</div> <script> myDiv.onclick = function(){ //将浏览器窗口大小调整到200,200 window.resizeTo(200,200); } </script>

1
2
3
4
5
6
7

<div id="myDiv">点击此处</div>
<script>
myDiv.onclick = function(){
    //将浏览器窗口大小调整到200,200
    window.resizeTo(200,200);
}
</script>

resizeBy()接收两个参数：浏览器新窗口与原窗口的宽度和高度之差。

<div id="myDiv">点击此处</div> <script> myDiv.onclick = function(){ //将浏览器窗口宽度减小100 window.resizeBy(-100,0); } </script>

1
2
3
4
5
6
7

<div id="myDiv">点击此处</div>
<script>
myDiv.onclick = function(){
    //将浏览器窗口宽度减小100
    window.resizeBy(-100,0);
}
</script>

[2] ~~窗口位置（获取、移动）~~

screenLeft、screenTop、screenX 和 screenY 都是只读属性，修改他们的值，并不会使得窗口发生移动。

screenLeft 和 screenTop 属性：分别表示窗口相对于屏幕左边和上边的位置。

在窗口最大化的情况下，运行下列代码时，各个浏览器返回的值并不相同： chrome返回left:0;top:0。 IE返回left:0;top:56(若有菜单栏，则返回left:0;top:78)。 // 这是因为IE中保存的是从屏幕左边和上边到由window对象表示的页面可见区域的距离。 safari则由于自身的bug，返回left:-8;top:-8。 Firefox不支持。

1
2
3
4
5
6

在窗口最大化的情况下，运行下列代码时，各个浏览器返回的值并不相同：
   chrome返回left:0;top:0。
   IE返回left:0;top:56(若有菜单栏，则返回left:0;top:78)。
   // 这是因为IE中保存的是从屏幕左边和上边到由window对象表示的页面可见区域的距离。
   safari则由于自身的bug，返回left:-8;top:-8。
   Firefox不支持。

screenX 和 screenY 属性：IE8-，也提供相同的窗口位置信息

在窗口最大化的情况下，各个浏览器返回的值依然不相同： firefox返回left:-7;top:-7。 chrome依然返回left:0;top:0。 IE9+不论是否显示菜单栏始终返回left:-7;top:-7。 safari则由于自身的bug，依然返回left:-8;top:-8。

1
2
3
4
5

在窗口最大化的情况下，各个浏览器返回的值依然不相同：
   firefox返回left:-7;top:-7。
   chrome依然返回left:0;top:0。
   IE9+不论是否显示菜单栏始终返回left:-7;top:-7。
   safari则由于自身的bug，依然返回left:-8;top:-8。

[2-1] 获取（兼容写法）：由于各浏览器的实现不同，无法在跨浏览器条件下取得精确坐标值。

<div id='myDiv'></div> <script> var timer = setInterval(function(){ var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX; var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY; myDiv.innerHTML = 'left1:' + leftPos + ';top1:' + topPos; }); myDiv.onclick = function(){ clearInterval(timer); }; </script>

1
2
3
4
5
6
7
8
9
10
11

<div id='myDiv'></div>
<script>
var timer = setInterval(function(){
var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;
myDiv.innerHTML = 'left1:' + leftPos + ';top1:' + topPos;
});
myDiv.onclick = function(){
clearInterval(timer);
};
</script>

[2-2] 移动：moveTo() 和 moveBy() 方法，可以将窗口精确移动到一个新位置，但只有IE浏览器支持。

moveTo() 接收两个参数，分别是新位置的x和y坐标值

<div id="myDiv">点击此处</div> <script> //将窗口移动到(0,0)处 myDiv.onclick = function(){ window.moveTo(0,100); } </script>

1
2
3
4
5
6
7

<div id="myDiv">点击此处</div>
<script>
   //将窗口移动到(0,0)处
   myDiv.onclick = function(){
       window.moveTo(0,100);
   }
</script>

moveBy() 接收两个参数，分别是水平和垂直方向上移动像素数

<div id="myDiv">点击此处</div> <script> //将窗口向下移动100像素 myDiv.onclick = function(){ window.moveBy(0,100); } </script>

1
2
3
4
5
6
7

<div id="myDiv">点击此处</div>
<script>
   //将窗口向下移动100像素
   myDiv.onclick = function(){
       window.moveBy(0,100);
   }
</script>

[3] 窗口操作（打开、关闭）

[3-1] 打开窗口：window.open()方法，可以导航到一个特定的URL，也可以打开一个新的浏览器窗口。

该方法接收4个参数：

要加载的URL、窗口目标、一个特性字符串及一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。

[ 参数 ] // 通常只需要传递第一个参数，默认在新窗口打开

第 2 个参数表示已有窗口或者框架的名称，或者是_self、_parent、_top、_blank等窗口打开方式。

第 3 个参数是一个逗号分隔的设置字符串，表示在新窗口中都显示哪些特性。

<div id="myDiv">点击此处</div> <script> myDiv.onclick = function(){ //在新窗口中打开高度为500，宽度为500，纵坐标为0，横坐标为200的qq网页 window.open("http://qq.com","_blank","height=500,width=500,top=0,left=200") } </script>

1
2
3
4
5
6
7

<div id="myDiv">点击此处</div>
<script>
myDiv.onclick = function(){
//在新窗口中打开高度为500，宽度为500，纵坐标为0，横坐标为200的qq网页
window.open("http://qq.com","_blank","height=500,width=500,top=0,left=200")
}
</script>

第 4 个参数是一个布尔值，只在第二个参数命名的是一个存在的窗口时才有用。

它声明了由第一个参数指定的URL是替换掉窗口浏览历史的当前条目(true)，还是在窗口浏览历史中创建一个新的条目(false)，后者是默认的设置。

1
2

它声明了由第一个参数指定的URL是替换掉窗口浏览历史的当前条目(true)，
还是在窗口浏览历史中创建一个新的条目(false)，后者是默认的设置。

[ 返回值 ]  新窗口的Window对象；且新创建的window对象有一个opener属性，保存着打开它的原始窗口对象。

[ 过滤 ] 大部分浏览器都有弹出窗口过滤系统。通常，open()方法只有当用户手动单击按钮或者链接的时候才会调用。JS 代码尝试在浏览器初始载入时开启一个弹出窗口时，通常会失败。如果被拦截，则返回值是undefined。

<div id="myDiv">点击此处</div> <script> var w = window.open(); console.log(w);//undefined </script>

1
2
3
4
5

<div id="myDiv">点击此处</div>
<script>
   var w = window.open();
   console.log(w);//undefined
</script>

[3-2] 关闭窗口：就像方法 open() 打开一个新窗口一样，方法 close() 将关闭一个窗口。

// 如果已经创建了 Window对象w，可以使用如下的代码将它关掉： <div> <span id="span1">打开窗口</span> <span id="span2">关闭窗口</span> </div> <script> var w; span1.onclick = function(){ w = window.open(); } span2.onclick = function(){ if(w){ w.close(); } } </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// 如果已经创建了 Window对象w，可以使用如下的代码将它关掉：

<div>
    <span id="span1">打开窗口</span>
    <span id="span2">关闭窗口</span>
</div>
<script>
var w;
span1.onclick = function(){
    w = window.open();
}
span2.onclick = function(){
    if(w){
        w.close();
    }
}
</script>

新窗口的对象w还有一个closed属性，用于检测是否被关闭。

<div id="myDiv">点击此处</div> <script> // 先显示false，1s后显示true myDiv.onclick = function(){ var w = window.open(); console.log(w.closed);>//>false setTimeout(function(){ w.close(); console.log(w.closed);>//>true },1000); } </script>

1
2
3
4
5
6
7
8
9
10
11
12
13

<div id="myDiv">点击此处</div>
<script>
// 先显示false，1s后显示true
myDiv.onclick = function(){
    var w = window.open();
    console.log(w.closed);>//>false
    setTimeout(function(){
        w.close();
        console.log(w.closed);>//>true
    },1000);

}
</script>

[ 小应用 ] 通过window.open()返回的对象可以操作新打开窗口的开闭。

<div id="myDiv">打开窗口</div> <script> var w = null; myDiv.onclick = function(){ //如果w不存在，即没有打开新窗口，或新窗口被关闭 if(!w){ w = window.open("http://baidu.com","_blank","height=400,width=400,top=10,left=10"); myDiv.innerHTML = '关闭窗口'; //如果w存在，说明新窗口被打开 }else{ w.close(); w = null; myDiv.innerHTML = '打开窗口'; } } </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div id="myDiv">打开窗口</div>
<script>
    var w = null;
    myDiv.onclick = function(){
        //如果w不存在，即没有打开新窗口，或新窗口被关闭
        if(!w){
            w = window.open("http://baidu.com","_blank","height=400,width=400,top=10,left=10");
            myDiv.innerHTML = '关闭窗口';
        //如果w存在，说明新窗口被打开
        }else{
            w.close();
            w = null;
            myDiv.innerHTML = '打开窗口';
        }
    }
</script>

[4] ~~系统对话框~~：浏览器可以通过 alert()、confirm() 和 prom() 等方法形成系统对话框，向用户显示信息。

// 系统对话框的外观由操作系统或浏览器设置决定，与 CSS 无关；对话框显示时，代码停止执行。

[ 警告框 ] alert()方法：接受一个字符串，并显示给用户；

<div id="myDiv">点击此处</div> <script> myDiv.onclick = function(){ alert([1,2,3]);//'1,2,3' } </script>

1
2
3
4
5
6

<div id="myDiv">点击此处</div>
<script>
   myDiv.onclick = function(){
      alert([1,2,3]);//'1,2,3'
   }
</script>

[ 确认框 ] confirm()方法：接受一个字符串，并显示两个按钮：确定（返回值：true） / 取消（返回值：false）；

<div id="myDiv">点击此处</div> <script> myDiv.onclick = function(){ if(confirm('是否添加背景颜色？')){ myDiv.style.backgroundColor = 'pink'; }else{ myDiv.style.backgroundColor = 'transparent'; alert('好吧，那就不加背景颜色了。') } } </script>

1
2
3
4
5
6
7
8
9
10
11

<div id="myDiv">点击此处</div>
<script>
myDiv.onclick = function(){
    if(confirm('是否添加背景颜色？')){
        myDiv.style.backgroundColor = 'pink';
    }else{
        myDiv.style.backgroundColor = 'transparent';
        alert('好吧，那就不加背景颜色了。')
    }
}
</script>

[ 提示框 ] prompt()方法：用于提示用户输入一些文本。

// 该方法接受两个参数：要显示给用户的文本提示和文本输入域的默认值（可为空）。 var result = prompt(text[, default]);

1
2

// 该方法接受两个参数：要显示给用户的文本提示和文本输入域的默认值（可为空）。
   var result = prompt(text[, default]);

<div id="myDiv">点击此处</div> <script> myDiv.onclick = function(){ var result = prompt("能告诉你叫什么吗?" ,"tom"); if(result != null){ if(result == 'tom'){ alert('tom是我的名字哦'); }else{ alert("欢迎你," + result); } }else{ alert('好吧，欢迎你，匿名。我以前一直以为匿名是个作家的名字'); } } </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div id="myDiv">点击此处</div>
<script>
myDiv.onclick = function(){
    var result = prompt("能告诉你叫什么吗?" ,"tom");
    if(result != null){
        if(result == 'tom'){
            alert('tom是我的名字哦');
        }else{
            alert("欢迎你," + result);
        }
    }else{
        alert('好吧，欢迎你，匿名。我以前一直以为匿名是个作家的名字');
    }
}
</script>

另，“查找”和“打印”，两个对话框可以通过 JS 打开，与用户通过浏览器菜单打开的对话框相同。

window.print(); // 显示打印对话框 window.find(); // 显示查找对话框 // 代码示例 <div id="myDiv">点击此处</div> <script> myDiv.onclick = function(){ window.print(); } </script>

1
2
3
4
5
6
7
8
9
10

window.print();    // 显示打印对话框
window.find();    // 显示查找对话框

// 代码示例
   <div id="myDiv">点击此处</div>
   <script>
      myDiv.onclick = function(){
          window.print();
      }
   </script>