BOM操作笔记1：使用window对象（JavaScript）

最新推荐文章于 2022-07-17 10:02:05 发布

HaanLen

最新推荐文章于 2022-07-17 10:02:05 发布

阅读量324

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_40119412/article/details/103864843

本文深入探讨了浏览器对象模型(BOM)中的核心元素Window对象，详细解释了其作为全局对象的角色，以及如何通过它访问浏览器窗口和其他客户端对象。文章还介绍了如何使用Window对象进行窗口操作，包括打开、关闭窗口，控制窗口大小和位置，以及使用定时器实现周期性任务。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

window对线下是BOM的核心，代表浏览器窗口的一个实例。在浏览器中，window对象既是JavaScript访问浏览器窗口的接口，也是JavaScript的全局对象（Global），因此在全局作用域中声明的所有变量和函数也是window对象的属性和方法。

访问浏览器窗口

通过window对象既可以访问浏览器窗口，同时与浏览器相关的其他客户端对象都是window的子对象，通过window属性进行引用。客户端各个对象之间存在一种结构关系，这种关系便构成浏览器对象模型（window对象代表根节点）。

对象	说明
window	客户端JavaScript中的顶层对象。每当body或frameset标签出现时，window对象就会自动创建
navigator	包含客户端有关浏览器的信息
screen	包含客户端显示屏的信息
history	包含浏览器窗口访问过的URL信息
location	包含当前网页文档的URL信息
document	包含整个HTML文档，可被用来访问文档内容及其所有页面元素

全局作用域

客户端JavaScript代对象是全局对象，在全局上下文环境中运行，window对象提供了全局作用域。由于window因此所有的全局变量码都被视为对象的属性。

var a="window.a";	//全局变量
function f(){	//全局函数
	alert(a);
}
alert(window.a);	//window.a
window.f();	//window.a

var a="a";	//全局变量
window.b="window.b";
c="c";
alert(delete window.a);	//false
alert(delete window.b);	//true
alert(delete window.c);	//true
alert(window.a);	//a
alert(window.b);	//undefined
alert(window.c);	//undefined

使用var语句声明全局变量，window会为这个属性定义一个名为“configurable”的特性，这个特性的值被设置为false，这样该属性就不能通过delete运算符删除。

使用系统测试方法

window对象定义了3个人机交互的接口方法：
alert（）：简单的提示框，由浏览器向用户弹出提示性信息。
conform（）：简单的提示框，由浏览器向用户弹出提示性信息。不够该方法弹出对话框包含两个按钮。
prompt（）：弹出提示对话框，可以接收用户输入的信息，并把用户输入的信息返回。

var s="hello";
confirm(s);

在这里插入图片描述

prompt(s);

在这里插入图片描述

说明：这3个方法仅接收纯文本信息，忽略HTML字符串，用户只能使用空格、换行符和各种符合来格式化提示对话框中显示文本。

打开和关闭窗口

使用window对象的open（）方法，可以打开一个窗口。用法如下：

window.open(URL,name,features,replace)

参数说明：

URL可选字符串，声明在新窗口中显示文档的URL。如果省略或者为空，则不显示任何文档。
name：可选字符串，声明新窗口的名称。
features：可选字符串，声明了新窗口要显示的标准浏览器的特征。
replace：可选的布尔值，规定了装载到窗口的URL是在窗口的浏览器历史中创建一个新条目，还是替换浏览历史的当前条目。

新建的window对象拥有一个opener属性，它保存着打开它的原始窗口对象。

myWindow=window.open();	//打开新的空白窗口
myWindow.document.write("hello");
myWindow.focus();	//让原窗口聚焦
myWindow.opener.document.write("good");
alert(myWindow.opener==window);	//检测window.opener的属性

在这里插入图片描述

myWindow=window.open();
myWindow.opener==null;

当opener属性设置为null，这样新建的标签页就无法与打开它的标签页通信。这样标签页之间的联系一旦切断，将无法再恢复。

使用window对象的close()方法可以关闭一个窗口。

w.close();

在打开窗口内部关闭自身窗口。

winodw.close();

自动弹出一个窗口，然后设置5秒之后自动关闭该窗口，同时允许用户单击页面超链接，更换窗口内显示的网页URL。

var url="https://blog.youkuaiyun.com/weixin_40119412/article/details/103843576";
var featrues="height=500,width=800,top=100,left=100,toolbar=no,menubar=no,scrollbar=no,resizable=no,location=no,status=no";
document.write('<a href="https://blog.youkuaiyun.com/weixin_40119412/article/details/103842494" target="ff">切换</a>');
var me=window.open(url,"ff",featrues);
setTimeout(function(){
	if(me.closed){
		alert("创建窗口已经关闭");
	}else{
		me.close();
	}
},5000);

使用框架集

在HTML文档中，如果页面包含框架，则每个框架都拥有自己的window对象，并且保存在frames集合中。在frames集合中，可以通过数值索引（从0开始）从左至右，从上到下访问每个window对象，或者使用框架名称访问每个window对象。每个window对象都有一个name属性，其中包含框架的名称。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<frameset rows="50%,50%" cols="*" frameborder="yes" border="1" framespacing="0">
		<frameset rows="*" cols="33%,*,33%" framespacing="0" frameborder="yes" border="1">
			<frame src="https://blog.youkuaiyun.com/weixin_40119412/article/details/103843576" name="middle" id="middle"/>
			<frame src="https://blog.youkuaiyun.com/weixin_40119412/article/details/103843576" name="left" id="left"/>
			<frame src="https://blog.youkuaiyun.com/weixin_40119412/article/details/103843576" name="right" id="right"/>
		</frameset>
		<frame src="https://blog.youkuaiyun.com/weixin_40119412/article/details/103843576" name="bottom" id="bottom"/>
		</frameset>
	<noframes>
	<body>
	</body></noframes>
</html>

在这里插入图片描述

控制窗口位置

使用window对象的screenLeft和screenTop属性可以读取或设置窗口的位置，即相对于屏幕左边和上边的位置。

获取位置。

document.write(window.screenLeft);
document.write("<br />");
document.write(window.screenTop);

使用window对象的moveTo(x,y)和moveBy(x,y)方法可以将窗口精确地移动到一个新的位置

控制窗口大小

确定窗口大小的4个window对象：innerWidth、innerHeight、outerWidth、outerHeight。

获取窗口大小。

document.write(window.innerHeight);
document.write("<br />");
document.write(window.innerWidth);
document.write("<br />");
document.write(window.outerHeight);
document.write("<br />");
document.write(window.outerWidth);

使用window对象定义的resizeBy(x,y)和resizeTo(x,y)方法，可以按照相对数量和绝对数量调整窗口的大小。
scrollBy()方法会将窗口中显示的文档向左、右或者向上、向下滚动指定数量的像素。
scrollTo()方法会将文档滚动到一个绝对位置。
focus()方法会请求系统将键盘焦点赋予窗口。
blur()方法会放弃键盘焦点。

使用定时器

方法	说明
setInterval	按照指定的周期（以毫秒计）来调用函数或计算表达式
setTimeout	在指定的毫秒数后调用函数或计算表达式
clearInterval	取消由setInterval（）方法生成的定时器对象
clearTimeout	取消由setTimeout（）方法生成的定时器对象

setTimeout()方法
setTimeout()方法能够在指定的时间段后执行特定代码。具体方法

var o=setTimeout(code,delay)

参数code表示要延迟执行的字符串，该字符串语句可以在window环境下执行，如果包含多条语句，应该使用逗号隔开；也可以是函数。
delay表示延迟的时间，以毫秒为单位。

当鼠标移过段落文本时，延迟弹出一个提示对话框。

<p>这是一个段落</p>

var p=document.getElementsByTagName("p")[0];
p.onmouseover=function(i){
	setTimeout(function(){
		alert(p.tagName);
	},1000);
}

为集合中每个元素都绑定一个事件延迟处理函数。

var o=document.getElementsByTagName("body")[0].childNodes;//获取body元素下所有子元素
for(var i=0;i<o.length;i++){//遍历元素集合
	o[i].onmouseover=function(i){//注册鼠标经过事件处理函数
		return function(){//返回闭包函数
			f(o[i]);//调用函数f，并传递当前对象的引用
		}
	}(i);//调用函数并传递循环序号，实现在闭包中存储对象序号值
}
function f(o){
	var out=setTimeout(function(){
		alert(o.tagName);
	},1000);
}

var o=document.getElementsByTagName("body")[0].childNodes;//获取body元素下所有子元素
for(var i=0;i<o.length;i++){//遍历元素集合
	o[i].onmouseover=function(i){//注册鼠标经过事件处理函数
		return function(){//返回闭包函数
			f(o[i]);//调用函数f，并传递当前对象的引用
		}
	}(i);//调用函数并传递循环序号，实现在闭包中存储对象序号值
}
o[i]=onmouseout=function(){
	return function(){
		clearTimeout(o[i].out)
	}
}(i);

function f(o){
	o.out=setTimeout(function(){
		alert(o.tagName);
	},1000);
}

setTimeout()方法只能被执行一次，如果希望反复执行该方法中包含的代码，则应该在setTimeout()方法中包含对自身的调用，这样就可以把自己注册为可重复被执行方法。

setInterval()方法
setInterval()方法方法能够周期性执行指定的代码。

var o=setInterval(code,interval)

<input type="text"  />

var t=document.getElementsByTagName("input")[0];
var i=1;
var out=setInterval(f,10000);
function f(){
	f.value=i+1;
	if(i>0){
		clearTimeout(out);
		alert("10秒钟已到");
	}
}