频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
javascript--BOM
2019-01-05 14:43:35           
收藏   我要投稿
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){

//这应该是用户打开窗口后的第一个页面

}

点击复制链接 与好友分享!回本站首页
相关TAG标签 javascript BOM
上一篇:React应该如何优雅的绑定事件?
下一篇:前端开发中的Error以及异常捕获
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站