BOM对象及相关问题介绍

BOM

BOM(Browser Object Model) 是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

window

---

BOM 的核心是window对象，它表示浏览器的一个实例。在浏览器中，即是javascript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象，这就意味着在网页中定义的任意变量、函数、对象都是以window作为Global对象。

所有在全局作用域中声明的变量、函数、对象都会作为window的属性和方法

var age = 24;

function printName(){
    console.log(age);
}

console.log(window.age);
window.printName();

window对象属性

---

window.innerHeight属性，window.innerWidth属性

这两个属性返回网页的CSS布局占据的浏览器窗口的高度和宽度，单位为像素。很显然，当用户放大网页的时候（比如将网页从100%的大小放大为200%），这两个属性会变小。

注意，这两个属性值包括滚动条的高度和宽度

windo.frames

window.frames返回一个类似数组的对象，成员为页面内的所有框架，包括frame元素和iframe元素。需要注意的是，window.frames的每个成员对应的是框架内的窗口（即框架的window对象），获取每个框架的DOM树，需要使用window.frames[0].document。

var iframe = window.getElementsByTagName("iframe")[0];
var iframe_title = iframe.contentWindow.title;

上面代码用于获取框架页面的标题。

iframe元素遵守同源政策，只有当父页面与框架页面来自同一个域名，两者之间才可以用脚本通信，否则只有使用window.postMessage方法。

在iframe框架内部，使用window.parent指向父页面。

navigator

---

Window对象的navigator属性，指向一个包含浏览器相关信息的对象。

navigator.userAgent属性返回浏览器的User-Agent字符串，用来标示浏览器的种类。下面是Chrome浏览器的User-Agent。
navigator.userAgent // "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.118 Safari/537.36"
通过userAgent属性识别浏览器，不是一个好办法。因为必须考虑所有的情况（不同的浏览器，不同的版本），非常麻烦，而且无法保证未来的适用性，更何况各种上网设备层出不穷，难以穷尽。所以，现在一般不再识别浏览器了，而是使用“功能识别”方法，即逐一测试当前浏览器是否支持要用到的JavaScript功能。

URL的编码/解码方法

---

JavaScript提供四个URL的编码/解码方法。

1. decodeURI()
2. decodeURIComponent()
3. encodeURI()
4. encodeURIComponent()
   区别
   encodeURI方法不会对下列字符编码

1. ASCII字母
2. 数字
3. ~!@#$&*()=:/,;?+'

encodeURIComponent方法不会对下列字符编码

1. ASCII字母
2. 数字
3. ~!*()'

所以encodeURIComponent比encodeURI编码的范围更大。

实际例子来说，encodeURIComponent会把 http:// 编码成 http%3A%2F%2F 而encodeURI却不会。

如果你需要编码整个URL，然后需要使用这个URL，那么用encodeURI。 encodeURI("http://blog.jirengu.com/?cat=11&a=饥人谷"); //"http://blog.jirengu.com/?cat=11&a=%25E9%25A5%25A5%25E4%25BA%25BA%25E8%25B0%25B7";

其中，汉字被编码。但是如果你用了encodeURIComponent，那么结果变为

"http%3A%2F%2Fblog.jirengu.com%2F%3Fcat%3D11%26a%3D%25E9%25A5%25A5%25E4%25BA%25BA%25E8

下面是几个小问题

---

1. window.onload 和 document.onDOMContentLoaded 有什么区别？

• 当 onload事件触发时，页面上所有的DOM、样式表、脚本、图片、flash都已经加载完成了
• 当 DOMContentLoadded事件触发时，仅当DOM加载完成，不包括样式表、图片、flash

2. 如何获取图片真实的宽高？

document.querySelector('img').onload = function () {
    console.log(this.widtn) //获取图片的宽
    console.log(this.height) //获取图片的高
}

3. 如何获取元素的真实宽高？

element.offsetHeight // 元素的真实高度
element.offsetWidth // 元素的真实宽度

这里具体解释一下offsetHeight ，clientHeight，scrollHeight这三个的区别
直接上图，一目了然

• clientHeight

  
  clientHeight

• offsetHeight

  
  offsetHeight

document.body.clientHeight
document.body.offsetHeight

docuemnt.body.style.border = "10px solid red"
docuemnt.body.clientHeight  //变小了
document.body.offsetHeight

• scrollHeight
  element.scrollHeight 元素滚动内容的总长度。如果元素没出现滚动条， scrollHeight等于 clientHeight

document.body.scrollHeight