BOM（浏览器对象模型）

BOM（浏览器对象模型）

---

1. window

(1)window有双重角色，既是通过js访问浏览器的一个接口，又是ECMAScript规定的Global对象。
(2)window方法
①setTimeOut()
1)第一个参数不建议用字符串，导致性能损失。传入函数中this严格模式是undefined
2)返回值为一个id，用于清除时传参。
②clearTimeOut()
③setInterval() 间歇调用，使用超时调用模拟是一种最佳方式。 最好不要使用间歇调用
④clearInterval()
⑤focus()
⑥blur()
⑦open()
⑧close()
⑨parseInt() parseFloat()
⑩inNaN()
⑪eval()
⑫alert() confirm() prompt()
1)同步模态：显示对话框时代码停止执行
2)alert谷歌屏蔽后续弹出复选框 第二个显示复选框
3)window.print() 打印对话框
window.find() 查找对话框
这两个是异步显示，因此在谷歌不受后续屏蔽约束。
(3)常量
①Infinity js识别的最大值
②NAN
③undefined
④null
(4)属性
在全局定义的变量，会被映射为window的属性，但与直接定义的window属性的区别是：全局变量不能使用delete window.属性，ie9+返回false, 而直接定义的window属性此操作返回true。Ie9-都会报错
因为var全局定义的属性configurable设置为false，所以不能delete。
访问未声明的变量报错，但直接用window.变量，未声明返回undefined，不会报错。
(5)窗口关系及框架
①访问框架
window.frames[0] frames[“topFrame”]
window.frames[“topFrame”] frames[0]
top.frames[0] top.frames[“topFrame”]
②在没有框架情况下parent等于top
③除非最高层窗口是通过window.open打开的，否则其window对象的name属性不会包含任何值。
④self对象 可与window互换使用
(6)窗口位置

var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;
console.log("left : " + leftPos);  
console.log("top : " + topPos);  //ie : 78  chrome: 0
//可传负值表示向左（上）移  好多浏览器已禁用，也不适用于框架
window.moveTo(200, 300);    //传入精确坐标
window.moveBy(0, 100);  //传入移动的大小

(7)窗口大小（视口）
innerWidth innerHeight
document.documentElement.clientWidth 标准流
document.body.clientWidth 非标准流
窗口大小： outerWidth outerHeight 浏览器窗口大小，但在chrome中返回视口，opera中返回单个标签页大小。
//好多浏览器已禁用，也不适用于框架
window.resizeTo(300, 300) //宽高
window.resizeBy(100, 50) //宽高之差
(8)导航和打开窗口
window.open()
参数1： url
参数2： 窗口目标
参数3： 特性字符串 “width=400,height=400,left=100,resizable=yes”
参数4：是否在历史记录取代当前页面

var newWindow = window.open("anotherframeset.htm","ccc",
                "width=400,height=400,left=100,resizable=yes");
newWindow.resizeTo(300,600);
        newWindow.moveTo(100,200);
        newWindow.close();
console.log(newWindow.closed)
console.log(newWindow.opener)  打开它的原始窗口对象

【注】原始窗口没有指向新窗口的指针，如果两个window标签页要通信，两个标签页就不能运行在独立的进程中，newWindow.opener=null,表示不需要通信，在单独的标签页中独立进程。
屏蔽弹出窗口：
浏览器内置 open返回null 表示屏蔽
第三方插件屏蔽 open抛异常 try/catch解决

var blocked = false;
        try {
            var newWindow = win.open(url, frame, str, bool);
            if (newWindow == null) {
                blocked = true;
            }
        }catch(ex) {
            blocked = true;
        }

2.Location

(1)window.location和document.location引用同一个对象。
(2)属性：
hash host hostname href pathname port protocol search
(3)查询字符串
(4)位置操作
① location.assign(“www.baidu.com”);
//下面两种方法与显示调用assign一样
window.location = “www.baidu.com”;
location.href = “www.baidu.com”;
② 每次修改location属性（hash除外），页面都会以新URL加载。
③修改任何属性都会有历史记录生成
④location.replace(url) 结果导致浏览器位置改变，但不会生成历史记录，不能前进和后退。
⑤location.reload() 可能从缓存中加载
location.reload(true) 从服务器加载
(5)URL 统一资源定位符

3.navigator对象

(1)属性用于检测浏览器类型
(2)检测插件
① name description filename length:插件所处理的MIME类型数量

hasPlugin: function(name) {
        name = name.toLowerCase();
        for(var i=0; i<navigator.plugins.length; i++) {
            if (navigator.plugins[i].name.toLowerCase().indexOf(name) > -1) {
                return true;
            }
        }
        return false;
    }

②每个插件对象本身是一个MimeType对象的数组，这些对象可以通过方括号语法访问。MimeType对象有四个属性：
1)description
2)enabledPlugin
3)Suffixes
4)Type
③plugins集合 refresh()方法 传true 刷新插件并且刷新有插件的页面，不传只刷新插件数组。
(3)注册处理程序 P213 看不懂

4.screen

screen.width
screen.height

5.history

(1)开发人员不允许获取用户历史url，但可以操作前进后退
history.go(-1) 后退一页
history.go(2) 前进两页
history.go(“bing.com”) 跳转到最近的包含bing.com的页面
history.back() 后退一页
history.forward() 前进一页
(2)if(history.length == 0) 用户打开窗口的第一个页面