首页 > 编程笔记 > JavaScript笔记

JS window对象的使用（非常详细）

BOM（Browser Object Model），即浏览器对象模型。BOM 定义了 JS 操作浏览器的一些方法和属性，提供了独立于内容的、与浏览器窗口进行交互的对象结构。

BOM 由多个对象组成，其中核心对象是 window 对象，该对象是 BOM 的顶层对象，代表浏览器打开的窗口，其他对象都是该对象的子对象。图 1 所示描述了 BOM 的对象结构。
BOM结构
图 1：BOM结构

之前的 document 对象我们已经介绍，本节我们主要介绍其中的 window 对象。

window 对象表示浏览器打开的窗口。如果网页中包含 frame 或 iframe 标签，则浏览器会为每个框架创建一个 window 对象，并将它们存放在 frames 集合中。需要注意的是，window 对象的所有属性和方法都是全局性的。而且 JavaScript 中的所有全局变量都是 window 对象的属性，所有全局函数都是 window 对象的方法。

window 对象是全局对象，因此访问同一个窗口中的属性和方法时，可以省略“window”字样，但如果要跨窗口访问，则必须写上相应窗口的名称或别名。

1. window对象的常用属性

window 对象的常用属性见表 1。

表 1：window 对象的常用属性
属性 描述
defaultStatus 设置或返回窗口状态栏的默认信息，主要针对 IE、Firefox 和 Chorme 没有状态栏
status 设置窗口状态栏的信息，主要针对 IE、Firefox 和 Chorme 没有状态栏
document 引用 document 对象
history 引用 history 对象
location 引用 location 对象
navigator 引用 navigator 对象
screen 引用 screen 对象
name 设置或返回窗口的名称
opener 表示创建当前窗口的窗口
self 表示当前窗口，等价于 window 对象
top 表示最顶层窗口
parent 表示当前窗口的父窗口

2. window对象的常用方法

window 对象的常用方法见表 2。

表 2：window 对象的常用方法
方法 描述
back() 回到历史记录中的上一网页，相当于 IE 浏览器的工具栏上单击后退按钮
forward() 加载历史记录中的下一个网页，相当于 IE 浏览器工具样上单击前进按钮
blur() 使窗口失去焦点
focus() 使窗口获得焦点
close() 关闭窗口。该方法关闭当前窗口以及在当前窗口中关闭通过JS方法打开的新窗口。注意：该方法对 Firefox 浏览器无效
home() 进入客户端在浏览器上设置的主页
print() 打印当前窗口的内容，相当于在IE浏览器中选择【文件】-【打印】
alert ( 警告信息字符串 ) 显示警告对话框，用以提示用户注意某些事项
confirm ( 确认信息字符串 )
显示确认对话框，有“确认”和“取消”两个按钮，单击确认按钮返回 true，单击取消按钮返回 false
prompt  ( 提示字符串, [默认值] ) 显示提示输入信息对话框，返回用户输入信息
open (URL ,窗口名称, [规格] ) 打开新窗口
setTimeout (执行程序, 毫秒) 在指定的毫秒数后调用函数或计算表达式
setinterval (执行程序, 毫秒) 按照指定的周期（以毫秒计）来调用函数或计算表达式
clearTimeout ( 定时器对象 ) 取消 setTimeout 设置的定时器
clearinterval ( 定时器对象 ) 取消 setinterval 设置的定时器

3. 访问window对象属性和方法的方式

访问window对象属性和方法的方式如下：

[window或窗口引用名称或别名].属性
[window或窗口引用名称或别名].方法(参数列表)

例如： 
window.alert("警告对话框");
adwin=window.open();//打开一个新的空白窗口，可以通过adwin引用打开的窗口
adwin.status="www.miaov.com";//adwin为上一行代码打开的窗口

访问同一个窗口中的属性和方法时，一般会省略 window，例如： 
alert("警告对话框");
status="www.miaov.com";

在实际使用中，window 也经常使用别名代替。window 常用的别名有以下几个。
例如： 
self.close();  //关闭当前窗口

4. window对象的应用

window 对象的应用主要有创建警告对话框、创建确认对话框、创建信息提示对话框、打开指定窗口以及定时器的使用等。

1) 创建警告对话框

使用 window 对象的 alert() 方法可以创建警告对话框。使用 alert() 创建警告对话框的示例前面各章中都有很多，在此不再赘述。

2) 创建确认对话框

使用 window 对象的 confirm() 方法可以创建确认对话框。

【例 1】使用 confirm() 创建确认对话框。 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script>
window.onload=function(){
     var oBtn=document.getElementsByTagName('input')[0];
     oBtn.onclick=function(){
         if(confirm('你确认删除吗？')){//当用户确认删除时返回true，否则返回false 
              alert("信息已成功删除!");
         }else{
              alert("你取消了删除！");
         }
     };
};
</script>
</head>
<body>
   <input type="button" value="删除"> 
</body>
</html>
当用户在图 2 所示的运行结果中单击“删除”按钮时，将弹出图示的确认对话框。
创建确认对话框
图 2：创建确认对话框

当用户在确认对话框中单击“确定”按钮时，确认对话框返回“true”，从而弹出图 3 所示的警告对话框；
确认删除的结果
图 3：确认删除的结果

当用户在确认对话框中单击“取消”按钮时，确认对话框返回“false”，从而弹出图 4 所示的警告对话框。
取消删除的结果
图 4：取消删除的结果

3) 创建信息提示对话框

使用 window 对象的 prompt() 方法可以创建信息提示对话框。

【例 2】使用 prompt() 创建信息提示对话框。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用prompt()创建提示信息对话框</title>
<script>
     var name=prompt("请输入你的姓名");
     alert("你的姓名是: "+name);
</script>
</head>
<body>
</body>
</html>
上述代码在浏览器中运行后首先会弹出一个信息提示对话框，在对话框中输入姓名，结果如图 5 所示。
创建信息提示对话框
图 5：创建信息提示对话框
单击图 5 对话框中的“确认”按钮后返回输入的信息，结果如图 6 所示。
在信息提示对话框输入信息后的结果
图 6：在信息提示对话框输入信息后的结果

4) 打开指定窗口

使用 window 对象的 open() 方法可以按一定规格打开指定窗口。

基本语法：

open（URL,name,spec）

语法说明如下：
表 3：常用规格参数表
规格参数 用法
fullscreen=yes|no|1|0 是否以全屏显示，默认为 no
location=yes|no|1|0 是否显示网址栏，默认为 no。只对 IE 有效
menubar=yes|no|1|0 是否显示菜单栏，默认为 no；如果打开窗口的父窗口不显示菜单栏，打开窗口也将不显示
resizable=yes|no|1|0 是否可以改变窗口尺寸，默认为 no。只对 IE 有效
scrollbars=yes|no|1|0 设置如果网页内容超过窗口大小，是否显示滚动条，默认为 no
status=yes|no|1|0 是否显示状态栏，默认为 no。只对 IE 有效
toolbar=yes|no|1|0 是否显示工具栏，默认为 no。只对 IE 有效
height=number 设置窗口的高度，以像素为单位
width=number 设置窗口的宽度，以像素为单位
left=number 设置窗口左上角相对于显示器左上角的 X 坐标，以像素为单位
top=number
设置窗口左上角相对于显不器左上角 Y 坐标，以像素为单位

注：规格参数 left 和 top 对不同的浏览器有不同的默认值，比如，对 left 参数，IE 默认大约为 253px，Chrome 则默认为 0，Firefox 则默认不超过 5px；对 top 参数，IE 默认大约为 450px，Chrome 则默认为 0，Firefox 则默认不超过 5px。故为了在不同浏览器中有统一的位置，应显式设置这两个参数。

【例 3】使用 open() 打开一个新窗口。 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用open()打开一个新窗口</title>
<script>  
     window.open("http://www.baidu.com","","height=300,width=500,location=0,left=200
                                    ,top=100");
</script>
</head>
<body>
</body>
</html>
上述代码在 Chrome 浏览器中运行后在距显示器左上角 (200, 100) 处打开一个 500×300px 大小的新窗口显示 baidu 网页。最终结果如图 7 所示。
使用open()打开一个新窗口
图 7：使用 open() 打开一个新窗口

【例 4】在打开的窗口中显示表单的处理页面。 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>在打开的窗口中显示表单的处理页面</title>
<script>
   window.onload=function(){
       var oBtn=document.getElementsByName('input')[0];
       oBtn.onclick=function(){
           window.open("","temp","top=80,left=100,width=300,height=100");
     };
   };
</script>
</head>
<body>
<form target="temp" action="ex8-2.html">
     <input type="submit" value="打开窗口" onClick="open_win()">
</form>
</body>
</html>
在<form>标签中设置表单处理页面显示的目标窗口为名称为“temp”的窗口，该名称正是打开的窗口的名称，因而表单处理页面将在打开的窗口中显示。上述代码在Chrome浏览器中运行后将在距显示器左上角 (100, 80) 坐标处打开一个 300×100px 大小的新窗口显示 ex2.html 页面内容，最终结果如图 8 所示。
在打开的窗口中显示表单处理页面
图 8：在打开的窗口中显示表单处理页面

5) 定时器的使用

使用 window 对象的 setTimeout() 以及 setInterval() 两个方法可以创建定时器，而使用 clearTimeout() 以及 clearInterval() 则可以清除对应的定时器。之前我们已详细介绍了定时器的创建及清除，在此不再赘述。

所有教程

优秀文章