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){
//这应该是用户打开窗口后的第一个页面
}
如对本文有疑问， 点击进行留言回复！！
荐 微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示
深入理解CSS background-blend-mode的作用机制
我要评论
网友评论