BOM 之 window 对象
在网页中定义的任何一个对象,变量和函数,都以 window 作为其
Global
对象,因此有权访问别的方法和属性
var age = 26;
function sayAge()
{
alert(this.age);
}
// alert(window.age); // 26
// sayAge(); // 26
window.sayAge(); //
26
在全局作用域中定义了一个变量 age 和 一个函数 sayAge(),它们被
自动归在了 window对象名下,于是,可以通过
window.age 访问变量
age,可以通过 window.sayAge() 访问函数 sayAge(),由于 sayAge()
存在于全局作用域中,因此 this.age 被映射到了 window.age。很多
全局 js 对象(如
location,navigator)实际上都是 window
对象的
属性
====================
窗口关系及框架
如果页面中包含框架,则每个框架都有自己的
window 对象,并且保
存在 frames 集合中。在 frames集合中,可以对通过数值索引(从 0
开始,从左到右,从上到下)或者框架名称来访问相应的 window 对象
。每个 window 对象都有一个 name
属性,其中包含框架的名称,如:
<html>
<head>
<title>frameset</title>
</head>
<frameset
rows="*,*">
<frame src="1.html"
name="topFrame" />
<frameset
cols="*,*">
<frame src="2.html" name="leftFrame"
/>
<frame src="3.html" name="rightFrame"
/>
</frameset>
</frameset>
</html>
可以通过
window.frames[0]或者 window.frames["topFrame"]来引用
上方的框架。也可以引用 top 而非 widow
来引用这些框架
(top.frames[0])。top
对象始终指向最高(最外)层的框架,也就
是浏览器窗口,使用它可以确保在每个框架中正确地访问另一个框架
,因为对于在一个框架中编写的任何代码来说,其中的
window对象指
向的都是那个框架的特定实例,而非最高层框架。与 top 相对的另一
个 window 对象就是
parent,它始终指向当前框架的直接上层框架。
在某些情况下, parent 有可能等于 top,但在没有框架时,一定等于
top,如:
<html>
<head>
<title>frameset</title>
</head>
<frameset
rows="*,*">
<frame src="1.html"
name="topFrame" />
<frameset
cols="*,*">
<frame src="2.html" name="leftFrame"
/>
<frame src="3.html" name="rightFrame"
/>
</frameset>
</frameset>
</html>
其中
3.html包含如下代码(含有另一个框架)
<html>
<head>
<title>3.html</title>
</head>
<framset cols="*,
*">
<frame src="4.html"
name="redFrame" />
<frame
src="5.html" name="blueFrame" />
</framset>
</html>
如果在代码在 redFrame或者 blueFrame中,那么 parent
对象指向的
就是 rightFrame,如果代码位于 topFrame中,则parent 指向的是
top ,因为
topFrame 的直接上层框架就是最外层框架。self 也是与
框架有关的一个对象,它始终指向 window,self与
window可以互换,
可以将不同层次的 window 对象连缀起来。如:
window.parent.parent.frames[0]
========================
窗口位置,确定和修改
window 对象位置
IE,Safari,Opera和Chrome都提供了 screenLeft和screenTop
属性,
分别用于表示窗口相对于屏幕左边和上边的位置。Firefox 则是用
screenX 和 screenY
提供相同的窗口位置信息, Safari 和 Chrome
也同时支持这两个属性,如下代码可以跨浏览器取得窗口左边和上边
的位置:
var
leftPos = (typeof(window.screenLeft) == "number")
? window.screenLeft :
window.screenX;
var topPos =
((typeof(window.screenTop)) == "number")
? window.screenTop :
window.screenY;
在 ie,opera,chrome中,screenLeft和screenTop
中保存的是从屏幕
左边和上边到由 window
对象表示的页面可以区域的距离。这就是说
,对象是最外层对象,而且浏览器窗口紧贴屏幕最上端--即 y 轴坐标
为0,那么
screenTop的值就是位于页面可见区域上方的浏览器工具栏
的像素高度。但是在 firefox 和
safari中,screenTop中的整个浏览
器容器相对于屏幕的坐标值,即在窗口的Y轴坐标为0返回0.
有些浏览器禁用以下方法
X指左边距离,Y指右边距离
window.moveTo(x,y); //
将窗口移动到指定距离的屏幕距离
window.moveBy(x,y);
将窗口向下移动指定的像素数
===============================================
窗口大小
firefox,safari,opera,chrome提供了四个属性
innerWidth,innerHeight,outerWidth, outerHeight,但是IE不支
持,chrome中
outerWidth与innerWidth一样,innerHeight与
outerHeight一样,但是firefox则不同,outerWidth,outerHeight是
整个窗口,但
innerWidth, innerHeight
是去除边框和上面的工具栏
之类的,IE可以通过document.documentElement.clientWidth和
document.documentElement.clientHeight中保存了页面窗口的信息,
但这是在标准模式中的,在混杂模式则用
document.body.clientWidth
和
document.body.clientHeight,可以通过如下代码来获取:
var pageWidth =
window.innerWidth;
var pageHeight =
window.innerHeight;
if((typeof(pageWidth)) !=
"number")
{
if(document.compatMode == "CSS1Compat")
{ // ie 标准模式
pageWidth =
document.documentElement.clientWidth;
pageHeight =
document.documentElement.clientHeight;
}else
{ // ie
混杂模式
pageWidth =
document.body.clientWidth;
pageHeight =
document.body.clientHeight;
}
}
以下方法有可能被禁止
resizeTo(x,y): 调整为指定宽度为 x , 高度为
y
resizeBy(x,y): 增加宽度为 x,高度为
y
===================================
导航和打开窗口
使用
window.open()方法既可以导航到一个特定的 url,也可以打开
一个新的浏览器窗口。这个方法接受四个参数:要加载的
url,窗口目
标,一个特性字符串以及一个表示新页面是否取代浏览器历史中当前加
载页面的布尔值.通常只须传递第一个参数,最后一个只是在不打开新
的窗口的情况下用.
//
<a href="http://www.cnblogs.com" target="topFrame" />
等于
window.open("http://www.cnblogs.com",
"topFrame");
如果指定的框架不在,则创建一个新窗口并且指定命名为
"topFrame",第二个参数还可以是
_self,_parent,_top,_blank
第三个参数是一个逗号分隔的设置字符串,表示在新窗口中都显示那
些特征,如
fullscreen = yes/no;是否最大化,仅IE
height = number,left=number,width=number
之间不能有空格
如 var newwin =
window.open
("http://www.cnblogs.com","_blank","height=300,width=500")
使用
close()可以关闭用 open打开的亲窗口,但只能关闭open打开的
窗口
newwin.close();
新创建的 window
对象有一个 opener属性,其中保存着打开它的原始
窗口对象。指向调用 window.open()
的窗口或框架
===================
间歇调用和超时调用
setTimeout("", time);
//在指定的时间执行
两个参数,第一个可以是字符串(和eval()函数中使用字符串一样),也
可以是函数
//
不建议
setTimeout(‘alert("hi")‘, 1000);
setInterval()接受的参数与
setTimeout()一样,但是是在指定的时
间重新执行,它们都回返回一个 数值ID
clearTimeout(timeoutid)/
clearInterval(clearTimeout)
清除setTimeout()/setInterval(),只要把 setTimeout(),
setInterval(),产生的ID作为
clearTimeout的参数即可
==================
系统对话框
alert()/confirm()/prompt();它们的外观由浏览器和(或)操作系统
设置决定
alert("字符串");
// 生成警告对话框。
confirm("字符串"); // 确认对话框,点击“确定”返回 true,点击"
取消"或者关闭按钮,则返回
false
prompt("显示的提示信息",“默认值(可为空)”);//一个提示框