5.3.1 window对象
window 对象表示整个浏览器窗口,但不必表示其中包含的内容。window 还可用于
移动调整它表示的浏览器的大小。
<html>
<head>
<title>Frameset Example</title>
</head>
<frameset rows="100,*">
<frame src="frame.html" name="topFrame" />
<frameset cols="50%,50%">
<frame src="anoterframe.htm" name="leftframe"/>
<frame src="yetanoterframe.html" name="rightframe"/>
</frameset>
</frameset>
</html>
window.frames[0]或window.frames["topFrame"] 也可以用top对象代替window对象
例如 top.frames[0].
top对象指向的都是最顶层的框架,即浏览器窗口本身。如果在框架内写代码,window对象只是指向框架本身。
也可以 window.leftFrame直接用框架名。
parent 指向上一级框架。 self指向当前窗口 即等于window。
1、窗口操作
moveBy(dx,dy) -- 当前窗口水平移动dx,垂直移动 dy。
moveTo(x,y) -- 窗口移动到xy。
resizeBy(dw,dh) -- 相对于浏览器窗口当前的大小。把宽度调整dw个像素,
高度调整dy个像素。
resizeTo(w,h) -- 调整到 wh。
需要知道窗口的位置及尺寸。
IE 提供了 windown.screenLeft和window.screenTop判断窗口的位置。document.body.offsetWidth和document.body.offsetHeight属性获取可视窗口的大小。但
不是标准属性。
Mozilla 提供了window.screenX和Window.ScreenY判断窗口的位置。还提供了
window.innerWidth 和 window.innerHeight属性来判断视口的大小,window.outerWidth和window.outerHeight属性提供了窗口自身的大小。
opera和Safari提供与Mozilla相同的工具。
2、导航和打开新窗口
window.open(url,name,"texing",boolean); 关于name,可以指定。也有专用名 _selft、_parent、_top、_blank
var oNewWin = window.open();
oNewWin.close();
3、系统弹窗
alert()、confirm、prompt
4、status
window.status = "";
5、时间间隔和暂停
window对象的setTimeout()可以设置暂停。第一个参数为要执行的代码也可以是函数指针。第二个为毫秒数。
setTimeout("alert('hello world!')",1000);
setTimeout("function(){alert('hello world!')}",1000);
返回数字暂停id。要取消未执行的暂停可以调用 clearTimeout(),并将暂停ID传递给它:
var iTimeoutId = setTimeout("alert('hello world')",1000);
clearTimeout(iTimeoutId);
时间间隔与暂停的方式相似,只是它无限次的隔一段时间重复一次代码。可以调用setInterval()方法设置时间间隔,参数与setTimeout()
setInterval("alert('Hello world!')");
setInterval(function{alert("hello world!");},1000);
function sayHelloWorld(){
alert("Hello world!");
}
setInterval(sayHelloWorld,1000);
也可以用ClearInterval()方法来阻止这个id再次执行。
var iNum = 0;
var iMax = 100;
var iIntervalId = null;
function incNum(){
iNum++;
if(iNum == iMax){
clearInterval(iIntervalId);
}
}
iIntervalId = setInterval(incNum,500);
也可以用setTimeout()实现。
var iNum = 0;
var iMax = 100;
function incNum(iNum!=iMax){
iNum++;
if(){
setTimeout(incNum,500);
}
}
setTimeout(incNum,500);
6、历史
通过window对象的history属性及history属性和它的方法即可实现访问历史导航
window.history.go(-1);
window.history.go(1);
window.history.back();
window.history.forward();
5.3.2 document对象。
document实际是window的对象属性.
alert(window.document==document); //true
这个对象的独特之处在于 它即属于bom又属于dom.
从bom角度看,document对象是由一系列集合构成,这些集合可以访问文档的各个部分,提供页面自身标准。每个浏览器的document各有有不同。
bom通用的一些属性。图:
bom中对象集合。图:
与window.frame集合相似,可以用数字或名字引用document对象的每个集合,即可以用 document.images[0]或document.images['iamge_name']访问图像.
document.images[0].src是获取第一个图像的src特性的代码。
最后,bom的document对象还有几个方法。最常用的write(),writeln().
var oNewWin = window.open("about:blank","newwindow");
oNewWin.document.open();
oNewWin.document.write("hello world!");
oNewWin.document.close();
5.3.3location对象
它是window对象和document对象的属性.
hash -- 返回#后得内容。
host -- 服务器名字(www.wrox.com)
hostname --
href -- 当前载入页面的完整url。
pathname -- url中主机名后面的部分 http://www.u.com/pictures/index.html
的pathname是 "/pictures/index.html"
port -- url中声明的请求端口。没指定则为空白。
protocol -- url中使用的协议
search -- 执行请求的url中的问号 后得部分 又称查询字符串。http://www.u.com/pictures/index.html?term=javascript中的search属性等于?term=javascript。
改变该属性的值,就可以导航到新页面。
replace 可以导航到某一页面 但是不会出现在history中。
location.reload(true);要从服务器端载入
location.reload(false);从缓存中载入。
location.toString()仅返回location.href的值。
5.3.4 navigator 对象
navigator是bom对象之一
5.3.5 screen 对象
screen 对象时window对象的属性。
screen对象包含下列属性。
availHeight --串口可以使用的屏幕高度,包括操作系统元素 (windows工具栏等)
availWidth -- 窗口可以使用的屏幕宽度。
colorDepth -- 用户表示颜色的位数。多为32位。
height -- 屏幕高度。
width -- 屏幕宽度。
window.moveTo(0,0);
window.resizeTo(screen.availWidth,screen.availHeight);