Window 对象
Window 对象是浏览器脚本执行引擎的全局对象,它的属性和方法众多,我们先看一下它的方法和属性列表,不要被它吓到,其实常用的也就那么几个,后面我会专门有介绍,对于一些不太常用,需要的时侯可以回头来再看这个表。
closed
一个只读的布尔值,声明了窗口是否已经关闭。
defaultStatus
一个可读可写的字符串,声明了显示在状态栏中的默认消息。
document
对描述窗口和框架中含有的文档的Document对象的只读引用。
frames
Window对象的数组,每个Window对象在窗口中含有一个框架。
history
对窗口或框架的History对象的只读引用。
length
窗口或框架包含的框架个数,也是数组frames[]中的元素数。
location
用于窗口或框架的Location对象。
Math
对一个对象的引用,该对象含有各种算术函数和常量。
name
一个字符串,存放了窗口的名字。
navigator
对Navigator对象的只读引用,提供Web浏览器的版本信息和配置信息。
opener
一个可读可写的属性,是对一个Window对象的引用,该对象含有调用open()方法的脚本以打开顶级浏览器窗口的脚本, 只有表示顶层窗口的Window对象的opener属性才有效,表示框架的Window对象的opener属性无效。
parent
对一个Window对象的只读引用,这个Window对象包含当前的窗口或框架。
screen
一个Screen对象,由浏览器中所有窗口共享。
self
对窗口自身的只读引用,等价于window属性。
status
一个可读可写的字符串,声明了浏览器状态栏中的当前内容。
top
对一个顶级窗口的只读引用,顶级窗口包含了这个窗口。
window
window对象等价于self属性,它包含了对窗口自身的引用。
innerHeight,innerWidth
可读可写的属性,声明了窗口的文档显示区高度和宽度,以象素计, NS 支持。
outerHeight,outerWidth
可读可写的属性,声明了整个窗口的高度和宽度,以象素计, Firefox, NS 支持。
pageXOffset,pageYOffset
只读的整数,声明了当前文档向右和向下滚动过的象素数, Firefox, NS 支持。
screenX,screenY
只读整数,声明了窗口左上角在屏幕的X坐标和Y坐标, Firefox, NS 支持。
clientInformation
IE中与navigator属性同义,IE支持。
event
一个Event对象,该对象存放窗口Window中最近发生事件的详细信息,IE支持。
alert()
在对话框框中显示简单的消息。
confirm()
用对话框询问一个回答为是或否的问题。
prompt()
用对话框请求输入一个简单的字符串。
setInterval()
周期性执行指定的代码。
clearInterval()
取消周期性执行的代码。
setTimeout()
在经过指定的时间之后执行代码。
clearTimeout()
取消挂起超时操作。
focus()
把键盘焦点赋予顶层浏览器窗口。
blur()
把键盘焦点从顶层窗口中移走。
open()
创建并打开一个新窗口。
close()
关闭窗口。
moveBy()
把窗口移动一个相对的数量。
moveTo()
把窗口移动到一个绝对的位置。
resizeBy()
把窗口大小调整指定的数量。
resizeTo()
把窗口大小调整到指定的大小。
scrollBy()
把窗口滚动指定的数量。
scrollTo()
把窗口滚动到指定的位置。
scroll()
滚动窗口中显示的文本。
print()
模拟对浏览器Print按钮的点击。
back()
其行为和用户点击了Back按钮一样, Firefox,NS支持。
captureEvents()
指定直接发送给该窗口的事件类型, Firefox,NS支持。
forward()
其行为和用户点击了Forward按钮一样, Firefox,NS支持。
handleEvent()
为给定的Event对象调用合适的事件处理程序, Firefox,NS支持。
home()
显示浏览器的主页,Firefox,NS支持。
releaseEvents()
指定不再捕捉的事件类型, Firefox,NS支持。
routeEvent()
将Event对象传递给下一个对它感兴趣的对象的合适的事件处理程序, Firefox,NS支持。
stop()
模拟对浏览器Stop按钮的点击, Firefox,NS支持。
navigate()
装载并显示出指定的URL, IE支持。
onblur
当窗口失去焦点时调用该事件的处理程序。
onerror
当发生JavaScript错误时调用该事件的处理程序。
onfocus
当窗口获得焦点时调用该事件的处理程序。
onload
当文档(或框架集)被完全装载进来时调用该事件的处理程序。
onmove
当移动窗口时调用该事件的处理程序,仅NS支持。
onresize
当调整窗口大小时调用该事件的处理程序。
onunload
当浏览器离开当前文档(或框架集)时调用该事件的处理程序。
最常用要数open方法和close方法了,我们先来看一下open方法的详细定义:
window.open(url, target, style);
url:指定需要打开的文件的链接。
target:指定要打开窗口的位置,一般有几个可选属性:_blank在新窗口打开页面,_self在当前窗口打开页面,_top在顶层窗口打开页面,另外还可以指定其他已命名的窗口。
style:指定窗口显示的风格,因为它的参数众多,且都是可选的,我们用一个例子来说明它。假设我们指定style="height=100, width=400, toolbar= no, menubar=no, scrollbars=no, resizable=no, location=no, status=no,top=100,left=300",说明我们打开的新窗口的风格是:(高度100,宽度400,不显示工具栏,菜单栏,滚动条,URL栏,状态栏,并且不可改变大小,左上角在屏幕上的位置是(100,300))
返回值:该方法返回对新窗口的引用。这个方法颇受争议,万恶的弹出窗口就是它了。
close 方法就比较简单,它主要用来关闭指定引用的窗口。
现在,我们先来看一个例子。 var newWindow;
function openWindow(){
newWindow = window.open("", "_blank", "height=100, width=400, toolbar= no, menubar=no, scrollbars=no, resizable=no, location=no, status=no,top=100,left=300");
}
function closeWindow(){
if(newWindow){
newWindow.close();
}
}openWindow closeWindow
如果你想轮询的执行某任务,比如在AJAX的程序中,轮询的检查服务器上的数据更新,或是希望经过指定的时间去执行某个操作,这个时候我们就需要用到setTimeout,setInterval哥俩了。而clearTimeout,clearInterval 专门用来取消它们。
先来看看setTimeout函数的定义:
功能:用于在指定的毫秒数后调用函数或计算表达式。
语法:setTimeout(code,millisec)
参数:
code:在定时时间到时要执行的JavaScript代码串。
millisec:设定的定时时间,用毫秒数表示。
返回值:定时器的ID值,可用于clearTimeout()方法停止指定的定时器。
注:setTimeout()只执行code一次。如果要多次调用,可使用setInterval()或者让code自身再次调用setTimeout()。
setInterval函数的定义如下:
功能:按照指定的周期(以毫秒计)来调用函数或计算表达式。
语法:setInterval(code,millisec)
参数:
code:在定时时间到时要执行的JavaScript代码串。
millisec:设定的定时时间,用毫秒数表示。
返回值:定时器的ID值,可用于clearInterval()方法停止指定的定时器。
注:setInterval()方法会不停地调用函数,直到用clearInterval()终止定时或窗口被关闭。
我们来看一个例子,下面有两个个进度条,当点击startTimeout的时候,第一条进度条的长度会逐渐的增加,当点击endTimeout的时候,它就会停下来。当点击startInterval的时候,第二条进度条的长度会逐渐的增加,当点击endInterval之后,它也会停下来。
startTimeout endTimeout
startInterval endInterval
这两个特效的实现,我们就用到了setInterval和setTimeout。以下是它的实现源码。 function progress(id){
var bar = document.getElementById(id);
var len = parseInt(bar.style.width);
if(len > 300){
len = 10;
}
bar.style.width = len + 1 + 'px';
}
var timeoutHandler, intervalHandler;
function startTimeout(){
//每执行一次,progressBar1的width加1。
progress('progressBar1');
//100ms 后,调用startTimeout
timeoutHandler = window.setTimeout(startTimeout, 100);
}
function startInterval(){
//每隔100ms,progressBar2的with加1.
intervalHandler = window.setInterval("progress('progressBar2')", 100);
}
function endTimeout(){
clearTimeout(timeoutHandler);
}
function endInterval(){
clearInterval(intervalHandler);
}
moveBy(),moveTo(),resizeBy(),resizeTo(),几个方法尽管用的不多,但是却很有意思,它可以控制窗口的大小和位置,我们使用一个例子来看它们的用法: function moveWindow(){
// 打开一个新的空白窗口。
var ow = window.open("", "_blank", "height=300, width=500, toolbar= no, menubar=no, scrollbars=no, resizable=no, location=no, status=no,top=100,left=300");
//1秒钟后,把它向下和向右分别移动100个像素。
setTimeout(function(){
ow.document.writeln("我向下和向右分别移动100个像素<br />");
ow.moveBy(100, 100)
}, 1000);
//2秒钟后,把它左上角移到坐标(100, 100)处。
setTimeout(function(){
ow.document.writeln("我左上角的坐标是(100, 100)<br />");
ow.moveTo(100, 100)
}, 2000);
//3秒钟后,把它的宽度减少100,高度增加100。
setTimeout(function(){
ow.document.writeln("我的宽度减少了100,高度增加了100。<br />");
ow.resizeBy(-100, 100)
}, 3000);
//4秒钟后,把它的宽度和高度设置成300。
setTimeout(function(){
ow.document.writeln("我的宽度和高度和宽度是300。<br />");
ow.resizeTo(300, 300)
}, 4000);
//5秒钟后,关闭弹出窗口。
setTimeout(function(){
ow.document.writeln("我要被关闭了。<br />");
ow.document.close();
ow.close();
}, 5000);
}
moveWindow
在这个例子中,我们用到了一个还没学习的方法document.writeln,这个方法在后面会有介绍,它的主要功能是将一个或多个指定的字符串插入当前正在解析的文档中或插入由open()方法打开的文档流中。
说到这里,我们不得不提一下浏览器中的对话框,它有三种,就是提示框,确认框,和输入框。使用alert(),confirm(),prompt()函数可以显示它们,由于它们比较简单,而篇幅有限,我们就用一个例子来介绍他们。 function showAlert(){
alert('欢迎你光临我的博客!');
}
function showConfirm(){
if(confirm("请确认你的操作")){
alert('你确认了你的操作。');
}else{
alert('你取消了你的操作。');
}
}
function showPrompt(){
var str = prompt("请你输入Something!");
alert("你输入的内容是:" + str);
}
showAlert showConfirm showPrompt
Document对象
Document对象也是最常用的对象之一,下表列出了它的常用属性和方法,不过此处列出的方法和属性都不是太常用,下篇我们将介绍DOM(文档对象模型),到时我们还将介绍document作为文档对象的另外的属性和方法,那些方法和属性可比现在的这些实用的多。
alinkColor
一个字符串属性,指定了document中被激活的链接的颜色。
anchors
一个Anchor对象数组,每个元素代表了文档中的一个锚。
applets
一个Applet对象数组。
bgColor
一个字符串,它是与文档关联在一起的cookie的值。
domain
一个字符串,它指定了文档所属的Internet域。
embeds
一个对象数组,每个元素表示一个由<embed>标记嵌入文档的数据。
fgColor
一个字符串属性,指定document文本的默认颜色。
forms
一个数组,元素是Form对象,每个元素代表出现在document中的一个表单。
images
一个数组,元素是Image对象,每个元素代表用<img>嵌入文档的一个图像。
lastModified
一个只读字符串,声明了最后一次修改文档的日期。
linkColor
一个字符串属性,指定了文档中未被访问过的链接的颜色。
links
一个数组,元素是Link对象,每个元素代表了文档中出现过的一个超文本链接。
location
一个Location对象,含有当前文档的完整URL,是Window.location的同义词,不建议使用。
plugins
数组embeds[]的同义词,不推荐使用。
referrer
一个只读字符串,含有链接到当前文档的文档的URL(如果存在)。
title
一个只读字符串,指定了当前文档的标题。
URL
一个只读字符串,声明了文档的URL。
vlinkColor
一个字符串属性,指定了document中已经访问过的链接的颜色。
activeElement
一个只读属性,引用文档中当前活动的输入元素(即具有输入焦点的元素),仅IE支持。
all
一个数组,元素是文档中包含的所有元素,仅IE支持。
charset
文档采用的字符集,仅IE支持。
children
一个数组,元素是文档的所有直接子元素,以他们在源代码中的顺序存放,仅IE支持。
defaultCharset
文档采用的默认字符集,仅IE支持。
expando
如果将expando设置成false,可以阻止客户端对象的扩展,仅IE支持。
parentWindow
包含文档的窗口,仅IE支持。
readyState
文档装载的状态,仅IE支持。它有4个可用的值:
uninitialized(还没有开始装载文档)
loading(正在装载文档)
interactive(装载的文档已经足够与用户进行交互)
Complete(文档已经装载完毕)
clear()
擦去文档的内容,反对使用。
close()
关闭由open方法打开的文档流。
open()
打开一个可供写入文档内容的流。
write()
将一个或多个指定的字符串插入当前正在解析的文档中或插入由open()方法打开的文档流中。
writeln()
与write()方法相似,只是在输入的字符串中插入一个换行符。
captureEvents()
请求指定类型的事件,Firefox支持。
getSelection()
返回当前选中的文档文本。
releaseEvents()
停止捕捉指定类型的事件。
routeEvent()
根据捕捉到的事件找到下一个与之相关的元素。
elementFromPoint()
返回位于指定地点(X坐标,Y坐标)的元素,仅是IE。
上面我们已经演示了writeln()方法,用于往文档中写入字符串,write()方法也类似,下面我们跟着例子来学习document的部分属性和方法 function showDemo(){
// 打开一个新的空白窗口。
var ow = window.open("", "_blank", "height=300, width=500, toolbar= no, menubar=no, scrollbars=no, resizable=no, location=no, status=no,top=100,left=300");
// 设置标题
setTimeout(function(){
ow.document.write("设置页面的标题,同Blog页面标题一致。<br />");
ow.document.title = document.title;
}, 1000);
// 设置字体颜色。
setTimeout(function(){
ow.document.write("设置文档字体颜色,红色。<br />");
ow.document.fgColor = '#ff0000';
}, 2000);
// 设置背景颜色。
setTimeout(function(){
ow.document.write("设置文档背景颜色,黑色。<br />");
ow.document.bgColor = '#000000';
}, 3000);
// 关闭文档输入。
setTimeout(function(){
ow.document.write("关闭文档输入。<br />");
ow.document.close();
}, 4000);
// 文档关闭后,再次写入数据,原来的数据将被清空。
setTimeout(function(){
ow.document.write("文档关闭后,再次写入数据,原来的数据将被清空。。<br />");
ow.document.close();
}, 6000);
}
showDemo