关于BOM浏览器文档对象模型

共计 4726 个字符，预计需要花费 12 分钟才能阅读完成。

这两天小落落读《JavaScrpit 高级程序设计》（第三版）依然读到了很多的知识盲点，以此篇作一个记录。如有错误也希望大家指正。

BOM（Browser Object Model 浏览器对象模型）
BOM 提供了很多对象，用来访问浏览器的功能，而这些功能与任何的网页内容无关。

EcmaScript 的核心是 JavaScript，而 BOM 无疑是 JavaScript 的核心。

我们先以一张图来表示 BOM 对象上的属性。

BOM 是用来访问浏览器的功能。那么，对于 BOM 来说，window 便是 BOM 的核心对象。

window 对象是一个比较特殊的存在。在浏览器当中，window 对象既是 JavaScrpt 访问浏览器窗口的一个接口，又是 ECMAScript 规定的全局对象。

window 在浏览器的具体功能：
全局作用域、窗口关系及框架、窗口位置、窗口大小、导航和打开窗口、间歇调用和超时调用、系统对话框

由于 window 对象在浏览器中是代表一个全局对象。因此所有在全局中定义的变量、函数、方法都会是 window 对象的属性和方法。
以下为例：
`var age = 29;
function sayAge(){
alert(this.age)
}
console.log(window.age)
window.sayAge();`

我们在全局中定义了一个变量 age，以及一个函数 sayAge。它们就会自动变成 window 对象的属性或者方法。所以我们可以通过 window. 的形式对它们进行调用。

知识点：
1、虽然定义在全局的变量就会变成 window 对象的属性。但与直接定义 window 对象的属性还是不同的。
直接定义的全局变量不能使用 delete 删除。
因为使用 var 定义的变量都有一个 Configurable 的特性，这个特性的值被设置为 false，所以这样定义的属性不能被 delete 删除。

2、IE9 以下版本，使用 delete 删除哪种定义的属性方法，都会抛出错误。

如果页面中存在框架 frame。那么每一个框架都有自己的 window 对象。并且每个框架的 window 对象是相互独立的。

在 frame 集中，可以通过数值索引（从 0 开始，从上到下，从左到右）或者框架的名称来访问相应的 window 对象。

如下代码

<frameset>
    <frame name="topFrame" rows="160,*">
        <frameset>
            <frame name="leftFrame">
                <frame name="rightFrame">
        </frameset>
</frameset>

以上代码，我们有三个 frame 框架。分为上，左、右。获取上面的框架

我们可以使用 window.frames[0]、window.frames[‘topFrame’]来获取。或者可以使用 top 来获取 top.frames[0]

用来确定和修改 window 对象位置的属性和方法有很多，
IE、Safari、Opera、Chrome 都提供了 screenLeft、screenTop 属性，分别表示窗口距离屏幕左边，窗口距离屏幕上边的距离。
Firefox 使用 screenX、screenY 表示。
Safari、Chrome 同时支持两个属性。

这种情况，各个浏览器都有自己的支持属性，如果想兼容各个浏览器，我们应该怎么办呢？

这时候就需要很好的利用三目运算了。利用三目运算符判断浏览器是否支持对应的属性。
三目运算符表达式?true:false;
typeof(window.screenTop)==’number’?window.screenTop:window.screenY。

这样，支持 screenTop 的浏览器就会返回 window.screenTop，不支持的浏览器就会返回 screenY.

IE9+、Firefox、Safari、Opera、Chrome 有四个属性：innerWidth、innerHeight、outerWidth、outerHeight

IE9+、Firefox、Safari：outerWidth,outerHeight 返回的是浏览器窗口本身的大小
即：以屏幕分辨率为 1920 的电脑为例
console.log(window.outerWidth) 输出一直都是 1920
window.innerWidth 会根据你调节窗口的在大小而改变。

Opera：这两个属性表示的是单个标签页对应的浏览器窗口的大小。而 innerWidth、innerHeight 则表示容器中页面视图区的大小（不包括边框宽度）

Chrome：outerWidth、outerHeight 与 innerWidth、innerHeight 返回相同的值，即视口大小，而非浏览器窗口大小。

知识点：
在 IE8 及更早的版本里，并没有提供取得当前浏览器窗口尺寸的属性。但是它可以通过 DOM 获取页面可视区域的相关信息。

IE、Firefox、Safari、Opera、Chrome 中，
document.documentElement.clientWidth
document.documentElement.clientHeight 保存了页面视口的信息。

在 IE6 中，以上的两个属性在标准的模式下才有效；
如果在混杂模式下就必须通过
document.body.clientWidth 和 document.body.clientHeight 获取相同的信息

这里主要应用的是 window.open()方法
首先我们来看一下它的语法
window.open(URL,name,specs,replace)
URL: 打开页面的 URL
name: 指定 target 属性或者窗口的名称
specs: 一个特性字符串。用来设置窗口的属性，并以逗号隔开。
replace: 规定了装载到窗口的 URL 是在窗口浏览历史中添加一个新条目，还是替换浏览历史中的当前条目。

例：
window.open(“https://www.baidu.com/”, “selfWindow”, “width:400,height:400”)
这样，就在页面的右下角打开了一个 400*400 的新窗口

知识点：
出于安全的考虑，很多浏览器在弹出窗口配置方面作了很多限制。例如，大多数的浏览器都内置了屏蔽程序，屏蔽弹出窗口。
如果浏览器屏蔽了弹出窗口，window.open()会抛出一个错误。基于此

1、检测浏览器是否屏蔽了弹出窗口，检测 window.open()的返回值，并将它的调用放入到 try catch 中

var blocked = false;
try{var wroxWin = window.open("https://www.baidu.com/", "selfWindow")
if (wroxWin == null){blocked = true;}
}catch(error){blocked = true;}
if(blocked){alert('弹出窗口被屏蔽')
}

2、对于没有屏蔽弹出窗口的浏览器，可以安装 Yahoo,Toolbar 等带有内置屏蔽程序的实用工具。

名字听起来很晦涩难懂，但其实这一块主要运用的是
window 的setTimeout 及setInterval方法

名词解释：
间歇调用：是指程序每隔一断时间就执行一次
超时调用：指程序在指定的时间过后，执行一次

根据以上的名词解释，便可以得知，间歇调用也就是 setInterval, 超时调用指 setTimeout 方法。

两个方法用法相同，此处我们就不再过多介绍。

所谓系统对话框，也就是系统内置的对话框方法。

常用的 alert、comfirm、prompt
三者具体的使用方式
三个都是弹出一个对话框，不同的是他们与用户的交互程度会依次（从左到右）递增

alert: 只是一个对话框。只有一个关闭按钮(‘ 关闭对话框 ’)

comfirm: 比 alert 更功能丰富一点，多了一个选择的。

prompt: 在 comfirm 的基础上，还添加了一个文本框，可以输入内容。

点击确定后，会返回文本框中的值。
点击取消会返回 null

系统对话框有以下几个特点
1、样式由系统决定
这些是由系统内置的对话框，不存在于 html 中，它的样式也不由 css 来决定。而是由浏览器决定。浏览器内置什么样子，展示出来便是什么样子。所以每个浏览器的对话框各不相同

2、调用系统对话框时，代码会结束运行
当程序在运行过程中，遇到系统对话框，如 alert，系统会暂停运行程序。直到对话框关闭，程序再继续运行。

location 是最有用的 BOM 对象之一。它提供了与当前窗口中加载的文档有关的信息。

它也是一个非常特别的属性。因为，它即是 window 的属性，也是 document 的属性。即
window.location == document.location

我们通常用它来访问地址栏的信息，如

方法名	返回值	说明
hash	#name=test	返回地址栏中 #后面的信息
host	baidu.com:80	服务器名及端口号
search	?name=a	返回地址中查询字符串。字符串以? 开头
href	https://baidu.com?name=test	返回当前地址栏中完整的 URL 地址

以上表中所列的 location 的一些方法，我们可以获取出大部分的地址栏信息。但大部分都是完整的。如果我们想获取单个的变量。
例如：想要获取地址栏中 name 的参数及参数值，我们又该怎么做呢？

这时候，我们可以将从地址栏获取的信息，整合到一起，并转换成一个对象，这样，我们需要的参数就变成了对象的一个属性。

function getStringArgs(){var locationURL = (location.search.length>0?location.search.substring(1):"")// 获取查询字符串，如果有值，则返回? 之后的内容，没有值则返回空串
    args = {};
    items = locationURL.length?locationURL.split("&"):[];
    name = null;
    value = null;
    len = items.length;
    for(let i=0;i<len;i++){item = items[i].split("=")
        name = decodeURIComponent(item[0]);
        value =decodeURIComponent(item[1]);
        args[name] = value;
    }
    return args;
}

知识点：
1、decodeURIComponent 用于解码。一般用于获取中文情况。因为中文在地址栏中会被编码，所以，我们获取值时，应该先进行解码。

我们也可以通过 location 改变浏览器的位置
最常见的
window.location.href = “http://baidu.com”
我们便可以由当前的页面，跳转到百度页

localtion 中还有一个 assign 方法
location.assign(“http://baidu.com”)
同样能达到跳转页面的效果

我们可以通过修改 location 的值，达到刷新当前页面，或者跳转其它页面的效果。如下图

图片截自 JavaScript 高级程序设计（第三版）

知识点：
1、修改 location 的值，除了修改 hash 外，页面都会重新加载

2、通过 location 修改地址后，浏览器会在历史记录里添加一条访问记录。这也意味着，我们可以通过“后退”“前进”按钮导航到前一个 / 后一个页面

前言

BOM 对象是什么

BOM 对象上的属性

2.1 Window

2.1.1 全局作用域

2.1.2 窗口关系及框架

2.1.3 窗口位置

2.1.4 窗口大小

2.1.5 导航和打开窗口

2.1.6 间歇调用和超时调用

2.1.7 系统对话框

2.2 Location

2.2.1 查询字符串参数

2.2.2 位置操作

Just My Socks（注册教程内含优惠码）