window 对象表示浏览器中打开的窗口。
window 对象集合
frames[] 返回窗口中所有命名的框架。(注意:框架数组包含frame标签和iframe标签,但不包含框架集frameset标签)
该集合是 Window 对象的数组，每个 Window 对象在窗口中含有一个框架或 。属性 frames.length 存放数组 frames[] 中含有的元素个数。
注意，frames[] 数组中引用的框架可能还包括框架，它们自己也具有 frames[] 数组。
Window 对象的 window 属性和 self 属性引用的都是它自己,当你想明确地引用当前窗口，而不仅仅是隐式地引用它时，可以使用这两个属性。
除了这两个属性之外，parent 属性、top 属性以及 frame[] 数组都引用了与当前 Window 对象相关的其他 Window 对象。
要引用窗口中的一个框架，可以使用如下语法：
frame[i] //当前窗口的框架
self.frame[i] //当前窗口的框架
w.frame[i] //窗口 w 的框架
要引用一个框架的父窗口（或父框架），可以使用下面的语法：
parent //当前窗口的父窗口
self.parent //当前窗口的父窗口
w.parent //窗口 w 的父窗口
要从顶层窗口含有的任何一个框架中引用它，可以使用如下语法：
top //当前框架的顶层窗口
self.top //当前框架的顶层窗口
f.top //框架 f 的顶层窗口
javascript中的window.parent,window.top,window.self详解
在应用有frameset或者iframe的页面时,parent是父窗口,top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe),self是当前窗口,
opener是用open方法打开当前窗口的那个窗口。
window.self功能：是对当前窗口自身的引用。它和window属性是等价的。
语法：window.self
注：window、self、window.self是等价的。
window.top功能：返回顶层窗口,即浏览器窗口。
语法：window.top
注：如果窗口本身就是顶层窗口,top属性返回的是对自身的引用。
window.parent功能：返回父窗口。
语法：window.parent
注：如果窗口本身是顶层窗口，parent属性返回的是对自身的引用。
在框架网页中，一般父窗口就是顶层窗口,但如果框架中还有框架,父窗口和顶层窗口就不一定相同了。
判断当前窗口是否在同一个框架中：
var b = window.top!=window.self;
document.write( "当前窗口是否在同一个框架中："+b );
你应当将框架视为窗口中的不同区域,框架是浏览器窗口中特定的部分。
一个浏览器窗口可以根据你的需要分成任意多的框架,一个单个的框架也可以分成其它多个框架,即所谓的嵌套框架。
window 对象属性
closed 返回窗口是否已被关闭。
defaultStatus 设置或返回窗口状态栏中的默认文本。
document 对Document 对象的只读引用。请参阅 Document 对象。
history 对History 对象的只读引用。请参数 History 对象。
innerheight 返回窗口的文档显示区的高度, IE9以下不支持, 采用document.documentElement.clientHeight代替。
innerwidth 返回窗口的文档显示区的宽度, IE9以下不支持, 采用document.documentElement.clientWidth代替。
解决兼容性：
window.innerWidth || document.documentElement.clientWidth;
window.innerHeight || document.documentElement.clientHeight;实例:
$(window).resize(function() {
var navWidth = window.innerWidth || document.documentElement.clientWidth;
//console.log(navWidth);
if(navWidth < 1920){
$("div.clearfix").remove();
}
});length 设置或返回窗口中的框架数量。
location 用于窗口或框架的 Location 对象。请参阅 Location 对象。
name 设置或返回窗口的名称。
Navigator 对 Navigator 对象的只读引用。请参数 Navigator 对象。
opener 返回对创建此窗口的窗口的引用。
outerheight 返回窗口的外部高度。IE不支持此属性, 且没有提供替代的属性。
outerwidth 返回窗口的外部宽度。IE不支持此属性, 且没有提供替代的属性。
pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。IE不支持, 使用scrollLeft代替。
pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。IE不支持, 使用scrollTop代替。
parent 返回父窗口。
Screen 对 Screen 对象的只读引用。请参数 Screen 对象。
self 返回对当前窗口的引用。等价于 Window 属性。
status 设置窗口状态栏的文本。
top 返回最顶层的先辈窗口。
window window 属性等价于 self 属性，它包含了对窗口自身的引用。
screenLeft
screenTop
screenX
screenY
只读整数。声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。IE、Safari 和 Opera 支持 screenLeft 和 screenTop，
而 Firefox 和 Safari 支持 screenX 和 screenY。
window.opener返回对创建此窗口的窗口的引用。
实例：
创建子窗口
新建网页
function f1(){
//window.open('url地址','打开形式_blank/_self/frame的src属性值/_top',规格);
window.open('./29-son.html','_blank','width=500,height=300,resizable=no,menubar=yes');
}
创建子窗口
29-son.html代码:
新建网页
//页面加载完毕，给li设置事件
window.onload = function(){
var lis = document.getElementsByTagName('li');
for(var i=0; i<lis.length; i++){
lis[i].onclick = function(){
//把获得的标签内容追加给父窗口
//opener代表父窗口的引用
var biaoti = opener.document.getElementById('biaoti');
biaoti.innerHTML+= this.innerHTML;
//alert(this.innerHTML);
}
}
}
子级窗口
- red
- blue
- green
window 对象方法
alert() 显示带有一段消息和一个确认按钮的警告框。
blur() 把键盘焦点从顶层窗口移开。
clearInterval() 取消由 setInterval() 设置的 timeout。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
close() 关闭浏览器窗口。
Firfox浏览器关闭方法出现问题
第一种解决方法：先使用open()方法,在打开的页面中再使用close()方法;
第二种解决方法：要在地址栏中输入about:config
搜索”close”, 查找到：dom.allow_scripts_to_close_windows 双击一下, 把false改为true。
注意：window.close()中的window关键字不能删除。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
createPopup() 创建一个 pop-up 窗口。
focus() 把键盘焦点给予一个窗口。
moveBy() 可相对窗口的当前坐标把它移动指定的像素。
moveTo() 把窗口的左上角移动到一个指定的坐标。
open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
print() 打印当前窗口的内容。
prompt() 显示可提示用户输入的对话框。
resizeBy() 按照指定的像素调整窗口的大小。
resizeTo() 把窗口的大小调整到指定的宽度和高度。
scrollBy() 按照指定的像素值来滚动内容。
scrollTo() 把内容滚动到指定的坐标。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
alert() 警告框 alert(message)
confirm() 确认框 confirm(message) 返回true和false
prompt() 提示框(输入框) prompt(text,defaultText) 返回变量, 如果没输入字符则返回””, 点击取消返回null
以上window对象的方法可以不带window.
prompt(text,defaultText)
function disp_prompt(){
var name=prompt("请输入您的名字","Bill Gates")
if (name!=null && name!=""){
document.write("你好，" + name + "！今天过得好吗？")
}
}
open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。
window.open(URL,name,features,replace)
URL: 一个可选的字符串，声明了要在新窗口中显示的文档的 URL。
如果省略了这个参数，或者它的值是空字符串，那么新窗口就不会显示任何文档。
name: 一个可选的字符串，该字符串是一个由逗号分隔的特征列表，其中包括数字、字母和下划线，该字符声明了新窗口的名称。
这个名称可以用作标记 和 的属性 target 的值。如果该参数指定了一个已经存在的窗口，
那么 open() 方法就不再创建一个新窗口，而只是返回对指定窗口的引用。在这种情况下，features 将被忽略。
_blank 在一个新的未命名的窗口载入文档
_self 在相同的框架或窗口中载入目标文档
_parent 把文档载入父窗口或包含了超链接引用的框架的框架集
_top 把文档载入包含该超链接的窗口,取代任何当前正在窗口中显示的框架
features: 一个可选的字符串，声明了新窗口要显示的标准浏览器的特征。如果省略该参数，新窗口将具有所有标准特征。
在窗口特征这个表格中，我们对该字符串的格式进行了详细的说明。
replace: 一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值：
true – URL 替换浏览历史中的当前条目。
false – URL 在浏览历史中创建新的条目。
重要事项：请不要混淆方法 Window.open() 与方法 Document.open()，这两者的功能完全不同。为了使您的代码清楚明白，
请使用 Window.open()，而不要使用 open()。
窗口特征（Window Features）
width=pixels 窗口的文档显示区的宽度。以像素计(后面不需要单位)。
height=pixels 窗口文档显示区的高度。以像素计。
left=pixels 窗口的 x 坐标。以像素计。
top=pixels 窗口的 y 坐标。
以上四个属性浏览器有效果
resizable=yes|no|1|0 窗口是否可调节尺寸。默认是 yes。
scrollbars=yes|no|1|0 是否显示滚动条。默认是 yes。
toolbar=yes|no|1|0 是否显示浏览器的工具栏。默认是 yes。
status=yes|no|1|0 是否添加状态栏。默认是 yes。
location=yes|no|1|0 是否显示地址字段。默认是 yes。
titlebar=yes|no|1|0 是否显示标题栏。默认是 yes。
channelmode=yes|no|1|0 是否使用剧院模式显示窗口。默认为 no。
directories=yes|no|1|0 是否添加目录按钮。默认为 yes。
fullscreen=yes|no|1|0 是否使用全屏模式显示浏览器。默认是 no。处于全屏模式的窗口必须同时处于剧院模式。
menubar=yes|no|1|0 是否显示菜单栏。默认是 yes。
以上很多属性浏览器都已不支持
window.open(“http://picasaWeb.google.com/isaacshun”,”_blank”,”height=300,width=400,top=30,left=40,resizable=yes”);
注意：在逗号和等号前不能有空格
myWindow=window.open('','','width=200,height=100');
myWindow.document.write("This is 'myWindow'");
myWindow.focus();
function open_win(){
window.open("../default.html","_blank","toolbar=yes, location=yes, scrollbars=yes, resizable=no, width=400, height=400");
}
moveBy() 方法可相对窗口的当前坐标把它移动指定的像素。
window.moveBy(x,y)
x 要把窗口右移的像素数
y 要把窗口下移的像素数
moveTo() 方法可把窗口的左上角移动到一个指定的坐标。
window.moveTo(x,y)
x 窗口新位置的 x 坐标
y 窗口新位置的 y 坐标
resizeBy() 方法用于根据指定的像素来调整窗口的大小。
resizeBy(width,height)
width 必需。要使窗口宽度增加的像素数。可以是正、负数值。
height 可选。要使窗口高度增加的像素数。可以是正、负数值。
resizeTo() 方法用于把窗口大小调整为指定的宽度和高度。
resizeTo(width,height)
width 必需。想要调整到的窗口的宽度。以像素计。
height 可选。想要调整到的窗口的高度。以像素计。
var oWin = window.open(“http://picasaWeb.google.com/isaacshun”,”_blank”,”height=300,width=400,top=30,left=40,resizable=yes”);
oWin.resize(400,300);
oWin.moveTo(100,100);
scrollBy() 方法可把内容滚动指定的像素数。
scrollBy(xnum,ynum)
xnum 必需。把文档向右滚动的像素数。
ynum 必需。把文档向下滚动的像素数。
scrollTo() 方法可把内容滚动到指定的坐标。
scrollTo(xpos,ypos)
xpos 必需。要在窗口文档显示区左上角显示的文档的 x 坐标。
ypos 必需。要在窗口文档显示区左上角显示的文档的 y 坐标。
close() 方法用于关闭浏览器窗口。
window.close()
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
setInterval(code,millisec[,”lang”])
code 必需。要调用的函数或要执行的代码串。
millisec 必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。
返回值：一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。
var int = self.setInterval("clock()",50) //注意格式：clock()需带引号且带括号
function clock(){
var t = new Date()
document.getElementById("clock").value=t
}
//经过测试:"int="是多余的语句;
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
setTimeout(code,millisec)
code 必需。要调用的函数后要执行的 JavaScript 代码串。
millisec 必需。在执行代码前需等待的毫秒数。
function timedMsg(){
var t=setTimeout("alert('5 seconds!')",5000)
}
Click on the button above. An alert box will be displayed after 5 seconds.
clearInterval() 方法可取消由 setInterval() 设置的 timeout。
clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。
clearInterval(id_of_setinterval)
id_of_setinterval 由 setInterval() 返回的 ID 值。
var int=self.setInterval("clock()",50)
function clock(){
var t=new Date()
document.getElementById("clock").value=t
}
clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout。
clearTimeout(id_of_settimeout)
id_of_settimeout 由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。
var c=0
var t
function timedCount(){
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
function stopCount(){
clearTimeout(t)
}
小案例：简单计时器
第一种方法：
简单计时器
//实现简单的计时器
var i = 0;
var timer;
function start(){
i++;
//第一步：要获取到id=res这个对象
var btnObj = document.getElementById("res");
btnObj.innerHTML = "程序运行了"+i+"秒";
//使用延时器 每隔1秒后调用这个函数
timer = setTimeout("start()",1000);
}
//所谓的停止 就是用来清除延时器
function stop(){
clearTimeout(timer);
}
第二种方法：
简单计时器
var i=0
function start(){
var oBtn = document.getElementById("btn");
timer= setInterval(function(){
oBtn.innerHTML = "程序运行了"+i+"秒";
i++;
}, 1000);
}
function stop(){
clearInterval(timer);
}
更多setInterval()和setTimeout()方法使用见JavaScript|BOM对象|定时器和延时器
blur() 方法可把键盘焦点从顶层窗口移开。
window.blur()
方法 blur() 可把键盘焦点从顶层浏览器窗口移走，整个窗口由 Window 对象指定。哪个窗口最终获得键盘焦点并没有指定。
注意：在某些浏览器上，该方法可能无效。
myWindow=window.open('','','width=200,height=100')
myWindow.document.write("This is 'myWindow'")
myWindow.blur()
focus() 方法可把键盘焦点给予一个窗口。
window.focus()
myWindow=window.open('','','width=200,height=100')
myWindow.document.write("This is 'myWindow'")
myWindow.focus()
以上可以省略”window”关键字的属性和方法有:
location
navigator
screen
history
document
alert()
confirm()
prompt()
window对象常用事件
onload
onscroll
onresize
本网站每日更新互联网创业教程，一年会员只需98，全站资源免费下载点击查看会员权益
