BOM & 浏览器对象

BOM：浏览器对象模型。

浏览器对象模型（Browser Object Model）
核心对象： window对象（是访问浏览器窗口的一个接口 && 全局变量对象）

window对象就是“窗口对象”，也就是任何一个打开的网页，其一定是“装载”到一个window对象中。window对象就代表该窗口。

1.window对象

1.全局变量不能通过delete操作符删除，window对象属性可以（IE9以下2种方式均报错）

2. innerWidth、innerHeight和outerWidth、outerHeight（窗口大小）

有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

• window.innerHeight - 浏览器窗口的内部高度  //   不包括所有界面元素（如工具栏/滚动条）,返回窗口的文档显示区的高度。
• window.innerWidth - 浏览器窗口的内部宽度
  
  
• • window.outerHeight - 浏览器窗口的内部高度  //   包括所有界面元素（如工具栏/滚动条）。
  • window.iouterWidth - 浏览器窗口的内部宽度
    
    

    所有主流浏览器都支持 outerWidth 和 outerHeight 属性。
    注意：IE 8 及更早 IE 版本不支持该属性。
    所有主流浏览器都支持 innerWidth 和 innerHeight 属性。
    注意：IE 8 及更早 IE版本不支持这两个属性。

对于 Internet Explorer 8、7、6、5：

• document.documentElement.clientHeight
• document.documentElement.clientWidth

或者

• document.body.clientHeight
• document.body.clientWidth

这个东西也是把我搞混了，同样的东西，我在chrome，360chrome，firfox测试，得出结论不同，所以…..两个属性靠谱，好在我们一般用页面视图大小，详情如：3

3. clientWidth和clientHeight（页面视图宽高）

兼容写法如下：

var cWidth = document.documentElement.clientWidth || document.body.clientWidth;
var cHeight = document.documentElement.clientHeight || document.body.clientHeight;

4. document.compatMode，确定页面处于何种模式 
“CSS1Compat” ===》标准模式 
“BackCompat” ===》混杂模式

5. window.open()打开窗口

 window.open();——可以弹出一个“小”窗口，该窗口里也就能够“放置”一个网页。

官方语法解释：

window.open(pageURL,name,parameters) 

其中：
pageURL 为子窗口路径 
name 为子窗口句柄 
parameters 为窗口参数(各参数用逗号分隔) 

我自己的理解：
             window.open(“要打开的网页地址url”，“自己给新窗口的名字name”，“新窗口的外观参数设定para”);

             url：可以是相对地址或绝对地址。
             name：自定义的名字，遵循命名规则就可以，比如n1, win1,  s1
             para：此设定有若干项，每项之间用逗号分隔，每项的形式为：项名=值

 

其实总共有四个参数：

• 参数1：要加载的URL
• 参数2：窗口目标
• 参数3：一个特性字符串，用于设置窗口的一些特性
• 参数4：一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值

一般只用前两个参数，第一个参数用法： 
window.open(“https://www.baidu.com/“);

eg:window.open ('page.html',
                         'newwindow',
                        'height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no') 

6. window对象的几个弹出对话框的方法：

    1. window.alert(“这里是文字信息”); 
    //可以认为只是一个文字性提示信息。

    2.  var v2 = window.confirm(“一个是否性的问题”);  //  确认框
    //弹出一个向用户询问“真假”的问题，用户可以回答“真假”。通常用于向用户提出一个需要进行“是／否”性回答的问题。其会返回一个布尔值（true/false）。
        

   3. var v1 = window.prompt(“文字提示”，“默认信息”) ; // 输入框
    //弹出一个供用户输入文字信息的对话框。通常用于向用户提出一个需要文字来回答的问题。其会返回一个“字符串值”

       

• window.print()；//打印框
• window.find()；//查找框

2.location对象

location即是window对象的属性，也是location对象的属性

下面是访问http://www.w3school.com.cn/tiy/t.asp?f=html_a_target_frameset 时候，location的信息

1.跳转网页方法

上面这三种方法都能跳转到百度

2.页面重载

3.navigator对象

这个属性主要记录了浏览器的信息，已经成为识别客户端浏览器的标准

根据下图可以做一个简单的了解 

 

4.screen对象

screen对象表示客户端，显示器对象信息

5.history对象

history对象保存着用户上网的历史记录 
history对象是window对象的属性

1. history.go（）方法

history.go(-1);         //后退1页  
history.go(1);          //前进1页
history.go(2);          //前进2页

 

2. history.length 
历史记录的数目

if(history.length === 0){
    //第一个页面
}