浏览器对象模型

---

本节重点

• 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 值 （表示取代当前正在进行的页面）
     

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

设置	值	说明
width	数值	新窗口的宽度 ，不能小于100
height	数值	新窗口的高度, 不能小于100
top	数值	新窗口的坐标, 不能为负值
left	数值	新窗口的坐标, 不能为负值
location	yes/no	在浏览器中是否显示地址栏
menubar	yes/no	在浏览器中是否显示菜单栏
resizable	yes/no	是否可以拖动改变浏览器的大小
scrollbars	yes/no	是否为溢出的内容显示浏览器的滚动条
status	yes/no	是否显示浏览器下面的状态栏
toolbar	yes/no	是否显示浏览器的工具栏

- 第三个参数的设置：

        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）

属性	描述的URL的内容
hash	若存在，表示锚点部分
host	主机名 ： 端口号
hostname	主机名
href	整个URL
pathname	路径名
port	端口号
search	查询字符串（包括传递的参数等等）

2. Location对象的方法

方法	功能
assign("url")	跳转到指定的 URL,与 href 等效
reload()	重载当前的url , 无参数
replace("url")	用新的 URL 替换当前的 URL.

3. history 对象

---

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

1. history 对象的属性

属性	描述 URL 中的部分
length	描述当前的历史记录中的个数

2. history 对象的方法

属性	实现的功能
back()	向前一个历史记录，类似后退
forword()	向后一个历史记录 ， 类似前进
go(num)	根据参数设置向前或者向后