12.窗口对象的属性和方法

JavaScript

  • 窗口对象的属性和方法:

格式:

[window.]属性
[window.]方法(参数)

opener.属性
opener.方法(参数)
self.属性
self.方法(参数)
parent.属性
parent.方法(参数)
top.属性
top.方法(参数)

窗口名称.属性
窗口名称.方法(参数)

  • 窗口对象的属性
document 当前文件的信息
location 当前URL的信息
name 窗口名称
status 状态栏的临时信息
defaultStatus 状态栏默认信息
history 该窗口最近查阅过的网页
closed 判断窗口是否关闭,返回布尔值
opner open方法打开的窗口的源窗口
outerHeight 窗口边界的垂直尺寸,px
outerWidth 窗口边界的水平尺寸,px
pageXOffset 网页x-position的位置
pageYOffset 网页y-position的位置
innerHeight 窗口内容区的垂直尺寸,px
innerWidth 窗口内容区的水平尺寸,px
screenX 窗口左边界的X坐标
screenY 窗口上边界的Y坐标
self 当前窗口
top 最上方的窗口
parent 当前窗口或框架的框架组
frames 对应到窗口中的框架
length 框架的个数
locationbar 浏览器地址栏
menubar 浏览器菜单栏
scrollbars 浏览器滚动条
statusbar 浏览器状态栏
toolbar 浏览器工具栏
offscreenBuffering 是否更新窗口外的区域
personalbars 浏览器的个人工具栏,仅Navigator

 

  • 窗口对象的方法:
alert(信息字串) 弹出警告信息
confirm(信息字串) 显示确认信息对话框
prompt(提示字串[,默认值]) 显示提示信息,并提供可输入的字段
atob(译码字串) 对base-64编码字串进行译码
btoa(字串) 将进行base-64编码
back() 回到历史记录的上一网页
forward() 加载历史记录中的下一网页
open(URL,窗口名称[,窗口规格])  
focus() 焦点移到该窗口
blur() 窗口转成背景
stop() 停止加载网页
close()  
enableExternalCapture() 允许有框架的窗口获取事件
disableExternalCapture() 关闭enableExternalCapture()
captureEvents(事件类型) 捕捉窗口的特定事件
routeEvent(事件) 传送已捕捉的事件
handleEvent(事件) 使特定事件的处理生效
releaseEvents(事件类型) 释放已获取的事件
moveBy(水平点数,垂直点数) 相对定位
moveTo(x坐标,y坐标) 绝对定位
setResizable(true|false) 是否允许调整窗口大小
resizeBy(水平点数,垂直点数) 相对调整窗口大小
resizeTo(宽度,高度) 绝对调整窗口大小
scroll(x坐标,y坐标) 绝对滚动窗口
scrollBy(水平点数,垂直点数) 相对滚动窗口
scrollTo(x坐标,y坐标) 绝对滚动窗口
setInterval(表达式,毫秒)  
setTimeout(表达式,毫秒)  
clearInterval(定时器对象)  
clearTimeout(定时器对象)  
home() 进入浏览器设置的主页
find([字串[,caseSensitivr,backward]]) 查找窗口中特定的字串
print()  
setHotKeys(true|false) 激活或关闭组合键
setZOptions() 设置窗口重叠时的堆栈顺序

 

  • 窗口对象的事件处理程序:

onBlur onDragDrop onError onFocus onLoad onMove onResize onUnload

 

例1:
<Script>

function checkPassword(testObject) {
if (testObject.value.length < 4) {
    alert("密码长度不得小于四");
    testObject.focus();
    testObject.select();
}
}

</Script>

请输入密码:
<INPUT TYPE="text" onBlur="checkPassword(this)">

 

例2:
<Script>

if (confirm("你满十八岁了吗?"))
    location = "adult.htm";
else
    alert("等你成年以後再来吧!");

</Script>

 

例3:
<Script>

var bgColor =
prompt("你喜欢哪一种底色:\n浅蓝色请按1,粉红色请按2",1)

if (bgColor == 1) document.bgColor = "#CCFFFF";
else if (bgColor == 2) document.bgColor = "#FFCCFF";
else document.bgColor = "#FFFFFF";

</Script>

 

例4:
<Script>
function grow() {
resizeBy(0, 50);
}

function shrink() {
resizeBy(0, -50);
}

</Script>

<Body onMouseOver="grow()" onMouseOut="shrink()">
将视窗放大与缩小
</Body>

 

例5:
<Script>

function scrollIt() {
for (y=1; y<=2000; y++) {
    scrollTo(1,y);
}
}

</Script>

<Body onDblClick=scrollIt()>
双击鼠标,画面会自动卷动...
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
... The End ...
</Body>

  • open方法的窗口规格参数:(yes/no,1/0)

格式:[var 新窗口对象名=]window.open("url","windowName","windowFeature")

alwaysLowered 是否将窗口显示的堆栈后推一层
alwaysRaised 是否将窗口显示的堆栈上推一层
dependent 是否将该窗口与当前窗口产生依存关系
fullscreen 是否满屏显示
directories 是否显示连接工具栏
location 是否显示网址工具栏
menubar 是否显示菜单工具栏
scrollbars 是否显示滚动条
status 是否显示状态栏
titlebar 是否显示标题栏
toolbar 是否显示标准工具栏
resizable 是否可以改变窗口的大小
screenX 窗口左边界距离
screenY 窗口上边界距离
top 窗口上边界
width 窗口宽度
height 窗口高度
left 窗口左边界
outerHeight 窗口外边界的高度
personalbar 是否显示个人工具栏

 

注释:open("","","menubar")
      open("","","menubar=1")
      open("","","menubar=yes")

 

例1:
<Script>

document.write ("文哥网络技术学习网");
open ('1.htm','','height=100,width=300');

</Script>

 

<!-------- 1.htm -------->
<TITLE>欢迎光临</TITLE>

<BODY onClick="self.close()">

<IMG SRC="images\welcome.gif" ALIGN="left">
<CENTER>
<FONT COLOR="blue" SIZE="5">欢迎光临</FONT><BR>
这是一个技术研习的小天地<BR>
</CENTER>

</BODY>

 

例2:
<Script>

document.write("文哥网络技术学习网")
helloWin = open ('1.htm','','height=100,width=300');

var line1 = "<FONT COLOR='blue' SIZE='5'>欢迎光临</FONT><BR>"
var line2 = "这是一个技术研习的小天地"
helloWin.document.write (line1 + line2)
helloWin.document.title = "欢迎光临"

</Script>

例3:
<Script>

window.defaultStatus = "最棒的线上学习网站";

</Script>

<A HREF="http://www.hubert.idv.tw" onMouseOver="status='内容很充实喔!';return true">
文哥网路技术学习网</A>

 

例4:
<Script>

queryWin = open('1.htm','','height=100,')

</Script>

利用子窗口来改变母窗口的底色

 

/* -------- 1.htm -------- */
<Script>

function passToOpener(color) {
    opener.document.bgColor = color;
    self.close();
}

</Script>
<CENTER>

请选择你喜欢的颜色?<BR>

<FONT onClick="passToOpener('#CCFFFF')"> >浅蓝色<</FONT> 

<FONT onClick="passToOpener('#FFCCFF')"> >浅红色<</FONT>

</CENTER>