本节重点

• BOM 模型的主要应用 windows对象模型 + location对象 + history对象

1. windows对象模型

每个新打开的窗口都有自己的window对象

windows对象模型

window 对象下的六大属性也都是对象

1. window的主要属性

   window的主要属性

2. window的主要方法

   window的主要方法

3. 系统对话框 alert() / confirm() / prompt()

   • alert() 弹出警告对话框

   • confirm() 可以点击确定或者取消（得到相应的 ture 或 false）

   • prompt() 提示框，可以得到返回值

       var num = prompt('请输入一个数字', 0); 
       alert(num);
     

   • print(); 得到打印对话框

   • find(); 得到查找对话框

   • 浏览器的底部状态值（系统属性）

       defaultStatus = '状态栏默认文本';  //浏览器底部状态栏初始默认值
     
       status = '状态栏文本 ';           //浏览器底部状态栏设置值
     

4. window.open() 新建浏览器窗口

   • window.open() 接收四个参数

       第一个： 需要加载的 URL 地址
     
       第二个： 窗口的名称/窗口的目标
     
       第三个： 表示浏览器特性的字符串
     
       第四个： boolean 值 （表示取代当前正在进行的页面）
     

   • 第三个字符串参数的传值

- 第三个参数的设置：

        open('http://www.baidu.com','baidu','width=400,height=400,top=200,left=200,toolbar=yes');

5. 窗口的位置和大小

   • 窗口的位置信息

       screenLeft 和 screenTop   //IE 支持属性
       
       screenX 和 screenY       //firefox 支持属性
     

   • 窗口的 大小 信息

       innerWidth 和 innerHeight    //返回浏览器窗口的尺寸
       
       outerWidth 和 outerHeight  //浏览器窗口 + 边框的尺寸
     

     IE中的尺寸获取

       document.documentElement.clientWidth
       
       document.documentElement.clientHeight 
     

6. 间歇调用和超时调用

   • 超时调用

       var timeOut = setTimeout(function(){},time); 
     

     说明:超时调用返回一个数值信息 timeOut，表示该超时调用的 ID

       clearTimeout(timeOut);   //可以通过该 ID 信息清除超时调用
     

   • 间歇调用

        var interval = setInterval(function(){},time);
     

     间歇调用表示每隔 time 时长的时间调用一次，反复执行

     因为间歇调用是反复执行的 所以在必要的时候清除间歇调用是非常必要的

       说明：间歇调用返回数值信息interval，表示间歇调用的 ID
       
       clearTimeout(interval);     //清除间歇调用
     

   • 使用超时调用模拟间歇调用

     一般认为,使用超时调用来模拟间歇调用是一种最佳模式 。在开发环境下,很少使用真 正的间歇调用,因为需要根据情况来取消 ID,并且可能造成同步的一些问题,我们建议不使用间歇调用,而去使用超时调用。

       var num = 0; 
       var max = 5;
       function timeOut() {
           num++;
           if (num == max) {
               alert('5 秒后结束!'); 
           } else {
               setTimeout(box, 1000);
           }
       }
       
       setTimeout(timeOut,1000);
     

2. Location 对象

window.location 和 document.location 等效。大家想想为什么呢？？

1. location对象的属性 （获取当前浏览器的URL）

2. Location对象的方法

3. history 对象

保存着用户上网的记录,从窗口被打开的那一刻算起。

1. history 对象的属性

2. history 对象的方法