总览
BOM
window 对象
全局作用域
窗口
间歇调用和超时调用
location 对象
navigator 对象
screen 对象
history 对象
window 对象
这是 BOM 的核心
1. 全局作用域
在全局作用域中声明的变量, 函数都是 window 的属性和方法
- var age = 29;
- function sayAge(){alert(this.age);
- }
- alert(window.age); //29
- sayAge(); //29
- window.sayAge(); //29
全局变量不能用 delete 删除, 但是直接在 window 上定义的属性可以
- var age = 29;
- window.color = "red";
- // 在 IE <9 时抛出错误, 在其他所有浏览器中都返回 false
- console.log(delete age);
- // 在 IE < 9 时抛出错误, 在其他所有浏览器中都返回 true
- delete window.color; //returns true
- console.log(age); //29
- console.log(window.color); //undefined
2. 窗口
window.frames 中保存着框架的集合
窗口位置
screenLeft 和 screenTop 属性, 分别用于表示窗口相对于屏幕左边和上边的位置.
跨浏览器取得窗口左边和上边的位置
- var leftPos = (typeof window.screenLeft == "number") ?
- window.screenLeft : window.screenX;
- var topPos = (typeof window.screenTop == "number") ?
- window.screenTop : window.screenY;
窗口大小
4 个属性: innerWidth,innerHeight,outerWidth 和 outerHeight. 不同的浏览器返回的值有所不同. 在 IE9+,Safari 和 Firefox 中, outerWidth 和 outerHeight 返回浏览器窗口本身的尺寸 (无论是从最外层的 window 对象还是从某个框架访问). 在 Opera 中, 这两个属性的值表示页面视图容器的大小. 而 innerWidth 和 innerHeight 则表示该容器中页面视图区的大小(减去边框宽度). 在 Chrome 中, outerWidth,outerHeight 与 innerWidth,innerHeight 返回相同的值, 即视口(viewport) 大小而非浏览器窗口大小. 在 IE6 中, 这些属性必须在标准模式下才有效; 如果是混杂模式, 就必须通过 document.body.clientWidth 和 document.body.clientHeight 取得相同信息.
跨浏览器获取页面视口的大小
- var pageWidth = window.innerWidth,
- pageHeight = window.innerHeight;
- if (typeof pageWidth != "number"){
- if (document.compatMode == "CSS1Compat"){
- pageWidth = document.documentElement.clientWidth;
- pageHeight = document.documentElement.clientHeight;
- } else {
- pageWidth = document.body.clientWidth;
- pageHeight = document.body.clientHeight;
- }
- }
导航和打开窗口
window.open(url)在新窗口中打开连接
- var wroxWin=window.open("http://www.wrox.com/","_blank",
- "height=400,width=400,top=10,left=10,resizable=yes");
- wroxWin.opener = null;
禁止老窗口和新窗口通信
间歇调用和超时调用
很重要, 详情参见 setTimeout 和 setInterval
2.location 对象
提供与当前窗口中加载文档有关的信息, 还提供了一些导航功能. location 对象既是 window 的属性也是 document 对象的属性. window.location 和 document.location 指向同一个对象. location 姑且认为是 URL.
查询字符串参数
查询字符串参数的栗子. 借助 location.search 获取到 URL[?s=b&v=f...#)之间的内容('['取,')'不取)
- function getQueryStringArgs(){
- // 取得查询字符串并去掉开头的问号
- var qs = (location.search.length> 0 ? location.search.substring(1) : ""),
- // 保存数据的对象
- args = {},
- // 取得每一项
- items = qs.length ? qs.split("&") : [],
- item = null,
- name = null,
- value = null,
- // 在 for 循环中使用
- i = 0,
- len = items.length;
- // 逐个将每一项添加到 args 对象中
- for (i=0; i <len; i++){
- item = items[i].split("=");
- name = decodeURIComponent(item[0]);
- value = decodeURIComponent(item[1]);
- if (name.length) {
- args[name] = value;
- }
- }
- return args;
- }
位置操作
location 很多方式可以改变浏览器的位置, assign(url)方法在浏览器中生成一条记录, 可以使用后退按钮导航到前一个页面. 但是 replace(url)方法不能后退到前一个页面. reload()作用是重新加载当前显示的页面
- location.assign(''http://www.baidu.com")
- // 下面两句相当于隐式调用 assign()方法.
- window.location=''http://www.baidu.com"
- location.href=''http://www.baidu.com"
- // 不能后退到前一个页面
- location.replace(''http://www.baidu.com")
navigator 对象
提供浏览器详细信息
检测插件
对于非 IE 浏览器, 可以使用 plugins 数组来达到这个目的. 该数组中的每一项都包含下列属性.
name: 插件的名字.
description: 插件的描述.
filename: 插件的文件名.
length: 插件所处理的 MIME 类型数量.
- // 非 IE
- function hasPlugin(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;
- }
在 IE 中检测插件的唯一方式就是使用专有的 ActiveXObject 类型, 并尝试创建一个特定插件的实例. IE 是以 COM 对象的方式实现插件的, 而 COM 对象使用唯一标识符来标识. 因此, 要想检查特定的插件, 就必须知道其 COM 标识符.
- function hasIEPlugin(name){
- try{
- new ActiveXObject(name)
- return true
- }catch(ex){
- return false
- }
- }
screen 对象
提供用户显示器分辨率详细信息
history 对象
保存在用户历史记录信息.
- // 后退一页
- history.go(-1);
- // 前进一页
- history.go(1);
- // 前进两页
- history.go(2);
- // 跳转到最近的 wrox.com 页面
- history.go("wrox.com");
- // 跳转到最近的 nczonline.net 页面
- history.go("nczonline.net");
- // 后退一页
- history.back();
- // 前进一页
- history.forward();
history 对象还有一个 length 属性, 保存着历史记录的数量.
- if (history.length == 0){
- // 这应该是用户打开窗口后的第一个页面
- }
来源: http://www.jianshu.com/p/02dac52fedbf