|
窗口对象的属性和方法：
格式：
[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>
屏幕对象：
描述屏幕的显示及颜色属性。
屏幕对象的属性：
格式： screen.属性
availHeight 屏幕区域的可用高度
availWidth 屏幕区域的可用宽度
colorDepth 颜色深度 256/8 16/16 32M/32
height 屏幕区域的实际高度
width 屏幕区域的实际宽度
例1：
<Script>
with (document) {
write ("您的屏幕显示设定值如下：<P>");
write ("屏幕的实际高度为", screen.availHeight, "<BR>");
write ("屏幕的实际宽度为", screen.availWidth, "<BR>");
write ("屏幕的色盘深度为", screen.colorDepth, "<BR>");
write ("屏幕区域的高度为", screen.height, "<BR>");
write ("屏幕区域的宽度为", screen.width);
}
</Script>
例2：
<Script>
if ( screen.width < 800 || screen.colorDepth < 8 ){
var msg = "本网站最佳浏览模式为 800 * 600 * 256";
alert(msg);
}
</Script>
事件对象：
当事件发生时，浏览器自动建立该对象，并包含该事件的类型、鼠标坐标等。
事件对象的属性：
格式：event.属性
data 返回拖拽对象的URL字符串（dragDrop）
width 该窗口或框架的高度
height 该窗口或框架的高度
pageX 光标相对于该网页的水平位置
pageY 光标相对于该网页的垂直位置
screenX 光标相对于该屏幕的水平位置
screenY 光标相对于该屏幕的垂直位置
target 该事件被传送到的对象
type 事件的类型
which 数值表示的键盘或鼠标键：1/2/3（左键/中键/右键）
layerX 光标相对于事件发生层的水平位置
layerY 光标相对于事件发生层的垂直位置
x 相当于layerX
y 相当于layerY
例1：
<Script>
function getEvent(evnt) {
eventWin = open ('','','width=200,height=100');
with (eventWin.document) {
write("事件类型：", event.type);
write("<br>鼠标的x坐标：", event.screenX);
write("<br>鼠标的y坐标：", event.screenY);
}
}
document.write ("单击...")
document.onmousedown = getEvent;
</Script>
例2：
<Script>
function getCoordinate(evnt) {
if (document.all) {
x = event.screenX;
y = event.screenY;
}
else {
x = evnt.screenX;
y = evnt.screenY;
}
status = "水平坐标："+ x + "；垂直坐标："+ y;
}
document.onmousemove = getCoordinate;
</Script>
例3：
<Script>
function whichKey(evnt) {
if (document.all) {
x = event.button;
if( x==1 ) alert("你单击了左键");
if( x==2 ) alert("你单击了右键");
}
else {
x = evnt.button;
if( x==1 ) alert("你单击了左键");
if( x==3 ) alert("你单击了右键");
return false;
}
}
document.onmousedown = whichKey;
document.write("请单击鼠标左/右键");
</Script>
历史对象：
用以存储客户端最近访问的网址清单。
格式：
history.属性
history.方法（参数）
历史对象的属性：
current 当前历史记录的网址
length 存储在记录清单中的网址数目
next 下一个历史记录的网址
previous 上一个历史记录的网址
历史对象的方法：
back() 回到上一个历史记录中的网址
forward() 回到下一个历史记录中的网址
go(整数或URL) 前往历史记录中的网址
例1：
history.go(-1)
newWin.history.back()
parent.downFrame.histroy.back()
例2：
<A HREF="#" onClick="history.back()">上一页</A>
<A HREF="javascript:history.back()">上一页</A>
位置对象：
用来代表特定窗口的URL信息。
格式：
location.属性
location.方法（参数）
URL的格式：
protocol//host:port/path#hash?search
URL的种类：
javascript: javascript程序代码
view-source: 显示源代码
http:
file:
ftp:
mailto:
news:
gopher
位置对象的属性：
hash 锚点名称
host 主机名称
hostname host:port
href 完整的URL字符串
pathname 路径
port 端口
protocol 协议
search 查询信息
位置对象的方法：
reload() 重新加载
replace(网址) 用指定的网页取代当前网页
例1：
按下按钮前往「文哥网络技术学习网」<P>
<INPUT TYPE="button" VALUE="走吧！" onClick="location.href='http://www.hubert.idv.tw/'">
例2：
<FONT COLOR="red"
onClick="location='http://www.hubert.idv.tw/'">
文哥网络技术学习网</FONT><P>
<FONT COLOR="blue" STYLE="cursor:hand"
onClick="location='http://www.hubert.idv.tw/'">
文哥网络技术学习网</FONT>
例3：
<Script>
var sec = 5;
function countDown() {
if (sec > 0) {
num.innerHTML = sec--;
}
else
location = "http://www.hubert.idv.tw/";
}
</Script>
<BODY onLoad="setInterval('countDown()', 1000)">
<CENTER>
文哥网络技术学习网
<H2>http://www.hubert.idv.tw/</H2>
五秒钟后自动带你前往<BR>
<FONT ID="num" SIZE="7" FACE="impact">5</FONT>
例4：
<A HREF="#" onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.hubert.idv.tw/');"><FONT COLOR="red"><U>设为首页</U></FONT></A><P>
<A HREF="javascript:window.external.AddFavorite('http://www.hubert.idv.tw/','文哥网络技术学习网');"><FONT COLOR="red"><U>加入收藏</U></FONT></A>
文件对象：
代表当前HTML对象，是由<body>标签组构成的，对每个HTML文件会自动建立一个文件对象。
格式：
document.属性
document.方法（参数）
文件对象的属性：
linkColor 设置超链接的颜色
alinkColor 作用中的超链接的颜色
vlinkColor 链接的超链接颜色
links 以数组索引值表示所有超链接
URL 该文件的网址
anchors 以数组索引值表示所有锚点
bgColor 背景颜色
fgColor 前景颜色
classes 文件中的class属性
cookie 设置cookie
domain 指定服务器的域名
formName 以表单名称表示所有表单
forms 以数组索引值表示所有表单
images 以数组索引值表示所有图像
layers 以数组索引值表示所有layer
embeds 文件中的plug-in
applets 以数组索引值表示所有applet
plugins 以数组索引值表示所有插件程序
referrer 代表当前打开文件的网页的网址
tags 指出HTML标签的样式
title 该文档的标题
width 该文件的宽度（px）
lastModified 文件最后修改时间
文件对象的方法：
captureEvents(事件) 设置要获取指定的事件
close() 关闭输出字符流，强制显示数据内容
getSelection() 取得当前选取的字串
handleEvent(事件) 使事件处理器生效
open([mimeType,[replace]]) 打开字符流
releaseEvents(事件类型) 释放已获取的事件
routeEvent(事件) 传送已捕捉的事件
write(字串) 写字串或数值到文件中
writeln(字串) 分行写字串或数值到文件中（<pre>..</pre>）
文件对象的事件处理程序：
onClick onDbClick onKeyDown onKeyPress onKeyUp onMouseDown onMouseOver
例1：
<Script>
document.bgColor = "white";
document.fgColor = "black";
document.linkColor = "red";
document.alinkColor = "blue";
document.vlinkColor = "purple";
</Script>
测试文件对象的颜色属性：<BR>
<A HREF="http://www.hubert.idv.tw">文哥网路技术学习网</A>
例2：
<Script>
var update_date = document.lastModified;
var formated_date = update_date.substring(0,10);
document.write("本网页更新日期：" + update_date + "<BR>")
document.write("本网页更新日期：" + formated_date)
</Script>
|