JavaScript 中 window 对象

发表于: 2015-04-21分类于:JavaScript

window对象

全局作用域

window是BOM的核心对象,也扮演这ECMAScript中Global的对象。在全局作用域中声明的变量和函数都会成为window对象的属性和方法。

向window对象添加属性可以以下面这样的形式:

var age = 21;
window.color = "red";

但是这两种方法并不是完全一样的,使用var语句添加的window属性的[[Configurable]]属性是false的,所以不能用delete删除掉该属性。

对全局属性进行访问也有两种形式:

var newvalue = value;
var newvalue = window.value;

当window中没有value这个属性的时候,第一条赋值语句会报错,而第二条不会,但是结果会是undefine。

窗口位置

var leftPos = typeof window.screenLeft == "number" ? window.screenLeft:window.screenX;
var topPos = typeof window.screenTop == "number" ? window.screenTop:window.screenY;

因为firefox使用screenX和screenY来代表窗口相对屏幕左上角的坐标,所以为了跨浏览器可以使用上面这样的方法。

moveTo,和moveBy则可以移动窗口,但是很多浏览器默认情况下是禁止移动的。

窗口大小

innerWidth,innerHeight,outerWidth,outerHeight分别返回视口的宽和高,以及浏览器窗口的宽和高。

document.documentElement.clientWidth和document.documentElement.clientHeight保存了视口的宽和高。但是对于IE6这两个属性需要在标准模式下才有效。在混杂模式下面需要使用document.body中的clientWidth和clientHeight.所以可以使用下面代码跨浏览器获得页面视口大小:

var pageWidth = window.innerWidth;
var 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;
	}
}
console.log(pageWidth+" "+pageHeight);

打开窗口

var newwindow = window.open(“http://www.baidu.com”,”_blank”);

浏览器默认情况下不允许修改主窗口的大小,但是或许允许修改弹出窗口的大小和位置。在使用open后返回一个新打开的窗口的指针,可以通过这个指针来检查是否打开成功等信息。

间歇调用和超时调用

超时调用

JS是单线程的语言,所以有的时候不得不使用定时在特定时间来执行代码。

setTimeout和clearTimeout可以完成这项工作。setTimeOut的使用方法如下:

var timeoutid = setTimeout(function(){
	alert("1000ms");
},1000);

在这段代码执行之后1000毫秒,将会执行传递给其的第一个参数。第一个参数可以是一个函数也可以是一段js代码的字符串,但是字符串的效率明显偏低一些。在定时时间未到的情况下,可以使用clearTimeout(timeouid);来清除定时,传递的参数是setTimeout返回值。

间歇调用

setInterval,使用方法和setTimeout是一样的,只不过它不是执行一次,而是没隔设定时间就会执行一次。

系统对话框

  • alert(“str”):显示警告消息
  • confirm(“str”):用于确认,会有返回值,返回值代表用户确认或者取消
  • prompt(“str”,”default_text”):获得用户输入

location对象

可以获得url的信息

使用assign或者修改href可以改变页面的位置,还可以使用replace改变当前的页面,而不在历史记录中出现。

可以得知浏览器的版本,代理,以及运行的平台等信息。

history对象

可以调用 window.history.go() 方法实现页面的前进与倒退操作。