javascript–BOM

14次阅读

共计 2284 个字符,预计需要花费 6 分钟才能阅读完成。

window 对象
BOM 的和新对象是 window, 它表示浏览器的一个实例。在浏览器中,window 对象有双重角色,它即是通过 javascript 访问浏览器窗口的接口,又是 ECMAScript 规定的 Global 对象。着意味着在网页中定义的任何一个对象、变量和函数,都以 window 作为其 Global 对象,因此有访问 parseInt() 等方法。

全局作用域 由于 window 对象同时扮演着 ECMAScript 中 Global 对象的角色,因此所有在全局作用域中声明的变量、函数都会变成 window 对象的属性和方法
var age = 29;
function sayAge(){
alert(this.age);
}
alert(window.age); //29
sayAge(); //29
window.sayAge(); //29
我们在全局作用域中定义了一个变量 age 和一个函数 sayAge(),它们被自动归在了 window 对象名下。于,可以通过 window.age 访问变量 age,可以通过 window.sayAge() 访问函数 sayAge() 由于 sayAge() 存在于全局作用域中,因此 this.age 被 window.age,最终显示的仍然是正确的结果。抛开全局变量会成为 window 对象的属性不谈,定义全局变量与 window 对象上直接定义属性还是有一点差别:全局变量不能通过 delete 操作符删除,而直接在 window 对象上的定义的属性可以。
var age = 29;
window.color = “red”;
// 在 IE < 9 时抛出错误,在其他所有浏览器中都返回 false
delete window.age;
// 在 IE < 9 时抛出错误,在其他所有浏览器中都返回 true
delete window.color; //returns true
alert(window.age); //29
alert(window.color); //undefined
另外,还要记住一件事:尝试访问未声明的变量会抛出错误,但是通过查询 window 对象,可以知道某个可能未声明的变量是否存在。
// 这里会抛出错误,因为 oldValue 未定义
var newValue = oldValue;
// 这里不会抛出错误,因为这是一次属性查询
//newValue 的值是 undefined
var newValue = window.oldValue;
本章后面将要讨论的很多全局 JavaScript 对象(如 location 和 navigator)实际上都是 window 对象的属性。

窗口关系及框架

如果页面中包含框架,则每个框架都拥有自己的 window 对象,并且保存在 frames 集合中。在 frames 集合中,可以通过数值索引(从 0 开始,从左至右,从上到下)或者框架名称来访问相应的 window 对象。每个 window 对象都有一个 name 属性,其中包含框架的名称.
窗口位置
window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == “number”) ? window.screenTop : window.screenY;
“`
这个例子运用二元操作符首先确定 screenLeft 和 screenTop 属性是否存在,如果是(在 IE、Safari、Opera 和 Chrome 中),则取得这两个属性的值。如果不存在(在 Firefox 中),则取得 screenX 和 screenY 的值。

窗口大小
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() 安全限制
系统对话框

location 对象

查询字符串参数
function getQueryStringArg () {
var qs = (window.location.search.length > 0 ? location.search.substring(1) : “”),
args = {},
items = qs.length ? qs.split(‘&’) : [],
item = null,
name = null,
value = null,
i = 0,
len = items.length;
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;
}

位置操作

history 对象
// 后退一页
history.go(-1);
// 前进一页
history.go(1);
// 前进两页
history.go(2);
// 后退一页
history.back();
// 前进一页
history.forward()
if (history.length == 0){
// 这应该是用户打开窗口后的第一个页面
}

正文完
 0