BOM编程之Window对象

liyjioo

已于 2024-04-25 17:37:51 修改

阅读量417

点赞数 5

文章标签： javascript 前端

于 2024-04-22 21:25:39 首次发布

本文链接：https://blog.csdn.net/liyjioo/article/details/138090139

版权

1.JavaScript的组成:

JavaScript的组成可以分为其主体的代码部分,以及代码运行的宿主环境。在JavaScript中,宿主环境可以是浏览器,也可以是Node。

JavaScript中规定:

宿主环境必须提供代码的基准实现,以及环境交互必须的拓展。

其中基准实现就表示能在宿主环境中运行，包括但不限于解析JavaScript代码、执行代码、处理语法错误等。拓展就表示宿主环境提供的额外功能和工具,就例如浏览器的alert(message)的弹窗等。

DOM和BOM实际上就是浏览器上的环境交互必须的拓展。

2.DOM和BOM的概念和区别:

DOM的英文全称是Document Object Model即文档对象模型,简单而言就是由它控制浏览器的内容。BOM的英文全称是Browser Object Model即浏览器对象模型,简单而言就是由它控制浏览器整个窗口。

BOM在JavaScript对应Window对象,是所有对象的顶级对象,包括Frames对象(每一个框架对象都有一个文档对象),Document对象(当前的文档对象),History对象(曾经访问过的URL地址记录),Navigator对象(返回浏览器被使用的信息),Location对象(文档当前访问的文档的相关属性包括URL,文档名等)。DOM对应的是Document对象,由此可见,BOM实际上包括了DOM。

3.BOM模型:

Window对象既能通过JavaScript访问浏览器窗口,又是一个全局对象。所以在浏览器中,window对象可以被省略,所以window.document.getElementById()能被略写为document.getElementById(),又例如window.alert()弹窗实际上可以直接写为alert()。

有关于BOM的对象如下:

以一个html文件为例:

其中白色页面表示Window浏览器窗口对象。

整个浏览器包括上面的灰色部分以及右边的浅灰色部分都叫做Navigator浏览器对象。

前进后退的箭头和历史记录内容都是History历史记录对象。

上面的D://...就是Location地址栏对象。

Screen对象指的是用户屏幕对象。

4.Window对象:

1.概念:

Window对象封装了当前浏览器的环境信息。一个Window对象可以包含多个Frame(框架)对象。每个Frame对象在所在的框架区域内作为一个根基,相当于整个窗口的Window对象。

或许这句话难以理解,但是分开来看, 一个Window对象可以包含几个Frame(框架)对象实际上就是说明Window对象可以通过方法来访问内部含有的各个Frame对象,例如window.frames就是可以获得当前窗口中所有的frame对象的数组。每个Frame对象在所在的框架区域内作为一个根基,相当于整个窗口的Window对象实际上意味着每个Frame对象都有自己独立的Window对象，可以拥有自己的文档、位置、屏幕尺寸等属性和方法,这个Window对象包含了该框架的所有属性和方法。

2.Window对象的属性:

1)frames表示当前窗口所有的frame对象的数组

2)length获得长度

要使用frames,就应先知道frame的概念相关操作,接下来就是对frame(框架)的简单概述:

1.frame能将浏览器划分为若干个小窗口,每个小窗口显示不同的网页。

2.由于框架页面不涉及页面的具体内容,所以不需要body标记。

3.使用<frameset>框架集合和写在其内部的<frame src="">框架和<noframes>设置无法显示时的效果。其中除了frame其他都是双标记。

4.使用cols或者rows分割,例如cols="value1,value2,..."其中使用*表示剩余的空间,多个*表示均分剩余内容。还可frameset嵌套frameset进行嵌套分割。

5.iframe表示内框架,使用frameborder="1"(有边框)/"0"(无边框), height,width,name,src(URL),scrolling="yes"(无论内容是否溢出都显示滚动条),"no"(不显示滚动条)/auto(根据内容是否溢出显示滚动条)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>window</title>
</head>
<frameset cols="*,*">//平均分空间给frame
	<noframe>
		不支持框架结构显示
	</noframe>
	<frame src="http://www.xxx.com" />
	<frame src="http://www.yyy.com" />
</frameset>
</html>

接下来是对frames的介绍:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>window</title>
</head>
<body>
	<script language="javascript">
		window.onload=function(){//当页面加载完毕后
		document.write(window.frames.length,"<br/>");//写下框架(包括frame,iframe等)的个数
		}
	</script>
	<iframe src="http://www.xxx.com" frameborder="0"></iframe><!--加入三个iframe框架-->
	<iframe src="http://www.yyy.com" frameborder="0"></iframe>
    <iframe src="http://www.zzz.com" frameborder="0"></iframe>
</body>
</html>

1)使用length求框架个数。这段代码中添加了三个iframe框架,这个框架的src表示网址(xxx,yyy,zzz只是代称)。然后再JavaScript中使用了document.write()在网页上写下数据,window.frames.length计算所有框架的个数并作为参数传给document.write(),于是页面上打印了3。

注意:1.如果没有在JavaScript中写window.onload()这类的在窗口加载后再进行运行的程序的话,最终输出的数可能为0。因为此时iframe可能还没有加载成功,JavaScript就开始运行,这时候frames数组没有任何值,所以会输出0。

除了第一种说的方法,实际上也可以将JavaScript移至iframe底部,这样也能先加载iframe再运行JavaScript。

结果如左图所示

总之,就是要等框架先加载后,框架数组才有数据,才能使用JavaScript的window.frames来获取数组

2.window.frames可以通过[index]来获取对应的元素,在上面还提到过frame的name属性,所以可以使用name来获得即[’name‘],要是不写索引就是返回第一个。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>window</title>
</head>
<body>
	<iframe src="" frameborder="0"></iframe>
	<iframe src="" frameborder="0"></iframe>
	<script language="javascript">
		window.onload=function(){
		document.write(window.frames[1],"<br/>");//获取数组中第二个元素
		}
	</script>
</body>
</html>

由于插入了两个iframe,所以获得的结果是[object Window]。

3.如果查找没有的iframe(例如超出数组下标),就会返回undefined

3)history表示当前窗口的历史记录,可以应用在网页导航中

主要方法有:

history.back()返回

history.forward()向前

<html>
<head>
<script>
window.onload = function(){
	var back = document.getElementById("back");//获得back
	var forward = document.getElementById("forward");//获得forward
	back.onclick = function(){
		window.history.back();//只要点击back按钮就返回
	}
	forward.onclick = function(){
		window.history.forward();//只要点击forward按钮就继续
	}
}
</script>
</head>
<body>
<input type="button" value="向后" id="back">
<input type="button" value="向前" id="forward">
</body>
</html>

代码中,设置了两个按钮,分别用于控制向前向后,然后使用id与JavaScript建立联系,onclick表示点击后的操作,后面跟着匿名函数分别时前进后退。然后打开浏览器,先随机打开几个网址,再使用自己创建的网址,然后点击向后按钮就能返回上一个浏览器历史。

4)closed返回浏览器是否关闭的逻辑值

<html>
<head>
<script>
window.onload = function(){
	document.write(window.closed);//closed返回当前窗口是否关闭的逻辑值
}
</script>
</head>
<body>
</body>
</html>

只要打开网页就能看到网页上显示的false如图

5)document表示当前窗口中显示的文档对象

对于document的操作会在DOM章节展示

6)location显示当前的URL信息

<html>
<head>
<script>
window.onload = function(){
	document.write(window.location);
}
</script>
</head>
<body>
</body>
</html>

网页上会输出当前的URL信息

7)name获得窗口的名字

<html>
<head>
<script>
window.onload = function(){
	window.name="这是窗口的名字";//设置窗口的名字
	document.write(window.name);//显示窗口的名字
}
</script>
</head>
<body>
</body>
</html>

注意window.name的值会在整个窗口或标签页的生命周期内保持不变，即使页面跳转到其他URL，除非该窗口或标签页被关闭。

8)window.opener 主要用于窗口间的交互，包括但不限于传递数据和执行操作。当一个窗口（无论是通过 window.open() 打开的普通窗口还是通过类似方式嵌入的 iframe）被另一个窗口引用时，这个被引用的窗口可以通过 window.opener 访问到引用它的原始窗口。

其中window.open的语法为:

window.open('https://www.example.com', '_blank', 'width=600,height=400');

第一个参数填入url,第二个参数填入打开方式,第三个参数填入页面参数。

所以使用opener就要能获取父窗口,但要注意试图访问跨域窗口的name属性时会被阻止。

9)parent获取直接包含的父窗口,直接父窗口通常是指一个窗口（无论是frame, iframe还是其他）被嵌入到另一个窗口中时，包含它的那个窗口。

10)top返回最顶层窗口

11)self返回自己的窗口

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>window</title>
</head>
<body>
	<script language="javascript">
		window.onload=function(){//当页面加载完毕后
			window.name="fileparent"
			console.log(window.frames[0].parent);
		}
	</script>
	<iframe src="new_file.html" frameborder="0" ></iframe>
</body>
</html>

这样的代码运行后就能获得parent对象。

但是如果使用name来访问可能也会涉及域的问题。

如图。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>window</title>
</head>
<body>
	<script language="javascript">
		window.onload=function(){//当页面加载完毕后
			console.log(window.top);
		}
	</script>
	<iframe src="new_file.html" frameborder="0" name="if1"></iframe>
</body>
</html>

这是top获得顶层窗口,输出与上面的一致。

3.window对象的方法:

1).alert()用于弹出系统消息框。

2).confirm()用于弹出询问对话框,返回一个布尔值。确认为true,否则为false。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>window</title>
</head>
<body>
	<script language="javascript">
		window.onload=function(){
			var flag = confirm("输入确认或者取消");//输入确认或者取消
			alert(flag);//输出返回的true或者false值
		}
	</script>

</body>
</html>

此时输入确定就返回true,输入取消或者离开页面就返回false。离开页面是指没有操作直接切换到其他网页的情况。

3)prompt(message[,defstr])提示用户输入信息,接受两个参数,即要显示的message和文本框的默认值defstr,将文本框的值作为函数值返回。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>window</title>
</head>
<body>
	<script language="javascript">
		window.onload=function(){
			var pro = window.prompt("请输入你的名字","");//提示语是"请输入你的名字",初始值是""
			alert(pro);//alert输出
		}
	</script>
	<iframe src="new_file.html" frameborder="0" name="if1"></iframe>
</body>
</html>

初始界面如下:

如果没有输入,那么返回初始值空字符串。

如果直接切换到其他界面就返回null。

4)open(url[,name[,features]])打开新窗口,注意feature是逗号隔开

5)close()关闭窗口

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>window</title>
</head>
<body>
	<script language="javascript">
		window.onload=function(){
			window.open("http://www.xxx.com");//open打开新窗口
            window.close();//关闭窗口
		}
	</script>
</body>
</html>

这样就会在新页面打开xxx的网站,然后原来打开的那个网页关闭,只剩下xxx网站。

name表示打开的方式,默认是_blank即新页面打开,还可以设置_self在原来的页面打开。

6)blur()失去焦点

7)focus()获得焦点

window.blur()：该方法用于将浏览器窗口从前台转移到后台，即使窗口失去焦点。这在需要让用户的注意力转移到其他窗口时很有用。需要注意的是，由于用户的系统设置，这个方法可能不会总是按预期工作。
window.focus()：相对应地，这个方法用于将浏览器窗口带到前台并使其获得焦点。这在需要提醒用户回到特定窗口时非常有用，比如在新窗口打开后，可能需要通过编程方式将其带回到前台来显示给用户。

注意：blur() 方法发出将窗口置于背景的请求。由于用户设置不同，它可能无法按预期工作。

addEventListener('blur', function() {
console.log('窗口失去焦点');
});

可以使用addEventListener来监视blur

8)print()打印页面

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>window</title>
</head>
<body>

<h2>window.print() 方法</h2>

<p>单击按钮可打印当前页面。</p>

<button onclick="window.print()">打印此页</button>

</body>
</html>

下面一般用于open打开的新页面:

9)moveBy(x,y)相对移动

10)moveTo(x,y)绝对移动

11)resizeBy(a,b)相对修改尺寸——x表示在原来的x大小基础上增加a个大小,y上b个大小

12)resizeTo(x,y)绝对改变尺寸

下面一般用于主页面:

13)scrollBy(x,y)相对滚动x是水平移动,y是垂直移动,右和下为正

14)scrollTo(x,y)绝对滚动

<!DOCTYPE html>
<html>
<body>
<button onclick="openWin()">打开 </button>
<button onclick="moveWin()">移动 </button>
<script>
var mywin;
function openWin() {
  mywin = window.open("", "", "width=400, height=400");
}

function moveWin() {
  mywin.moveBy(250, 250);
}
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<style>
body {width: 5000px}
button {position:fixed}
</style>
<body>
<span>这是一段文字用于移动--------------移动---------移动</span>
	<br/>
<button onclick="s()" style="position:fixed">水平滚动</button>
<script language="javascript">
	function s(){
		scrollBy(100,0);//向右移动100px
	}
</script>
</body>
</html>

这样会先创建一个窗口,然后移动窗口。其他操作一致。

        15)setTimeout(表达式/函数名,毫秒)执行一次定时器

        16)setInterval(表达式/函数名(不是函数的调用),毫秒)无限次循环定时器

        17)clearTimeout(定时器对象)清除setTimeout设置的定时器,返回暂停对象的id

        18)clearInterval(定时器对象)清除setInterval设置的定时器,返回暂停对象的id

于是,我们就可以以此作一个示例,

1.用Date对象和定时器做一个时钟。

<!DOCTYPE html>
<html>
<body>
<script>
window.onload=function(){
	var lab = document.getElementById("lab");
	window.setInterval(change,1000);
	function change(){
		var date = new Date;
		lab.innerHTML = date.getDate()+"日";
		lab.innerHTML += date.getHours()+":";
		lab.innerHTML += date.getMinutes()+":";
		lab.innerHTML += date.getSeconds();
	}
}
</script>
<lable id="lab"></lable>
</body>
</html>

但是对于个位数的时钟来说,应该在个位数前加0,如下图所示:

所以代码如下:

<!DOCTYPE html>
<html>
<body>
<script>
window.onload=function(){
	var lab = document.getElementById("lab");
	window.setInterval(change,1000);
	function change(){
		var date = new Date;
		lab.innerHTML = date.getDate()+"日";
		lab.innerHTML += expand(date.getHours())+":";
		lab.innerHTML += expand(date.getMinutes())+":";
		lab.innerHTML += expand(date.getSeconds());
	}
	function expand(num){
		if(num<10){
			num="0"+num;
		}
		return num;
	}
}
</script>
<lable id="lab"></lable>
</body>
</html>

加了个expand函数做判断。

2.广告滑动,鼠标没放上去的时候滚动,放上去之后停止,还可以通过点击序号来更改广告

成品如上,鼠标放到哪,那个数字就会修改为灰色背景,鼠标移出图片,图片就会自动跳转。

代码如下:

1.由于我们要设计这个广告,那么我们先创建一个div边框,将这个图片框在div内。

<!DOCTYPE html>
<html>
<head>
	<style>
		#container{
			width:474px;
			height:296px;
			border:1px solid red;
			margin:100px auto;
		}
	</style>
</head>
<body>
	<div id="container">
		<img src="../img/1.jpg" id="img">
	</div>
</body>
</html>

此时我们成功创建了一个框着照片的div图片,如果图片有位移,在style处使用*{margin:0px;padding:0px;}即可

2.接着我们需要用于转换的图片,把图片全部放到文件夹,并且命名为1,2,3之类的易于src调用的即可。

这里重命名为0,1,2后面跟着jpg

3.接着我们创建一个计时器,每1s将img的src改编为我们想要的照片。照片写为数字是因为这样更易于我们使用index之类的变量来储存照片之间的关系。

<!DOCTYPE html>
<html>
<head>
	<style>
		#container{
			width:474px;
			height:296px;
			border:1px solid red;
			margin:100px auto;
		}
	</style>
</head>
<body>
<script>
window.onload=function(){
	var index = 0;
	function change(){
		index = ++index%3;
		console.log(index);
		var img = document.getElementById("img");
		img.src="../img/"+index+".jpg";
	}
	var t = setInterval(change,1000);
</script>
	<div id="container">
		<img src="../img/1.jpg" id="img">
	</div>
</body>
</html>

如图,使用++index%3前置自增后和3取模,可以得到目前应该放哪个照片到div中。

4.但是这样没有实现用户鼠标放入后,照片不变更,所以可以继续使用clearInterval来清除计时器,并且使用setInterval当用户的鼠标出div后能继续正常变化照片。

<!DOCTYPE html>
<html>
<head>
	<style>
		#container{
			width:474px;
			height:296px;
			border:1px solid red;
			margin:100px auto;
			position: relative;
		}
	</style>
</head>
<body>
<script>
window.onload=function(){
	var index = 0;
	var con = document.getElementById("container");
	function change(){
		index = ++index%3;
		console.log(index);
		var img = document.getElementById("img");
		img.src="../img/"+index+".jpg";
	}
	var t = setInterval(change,1000);
	con.onmouseover = function(){
		window.clearInterval(t);
	};
	con.onmouseout = function(){
		t = setInterval(change,1000);//注意这里的赋值千万别再写var声明,不然就和上面的t不是一个了
	};
}
</script>
	<div id="container">
		<img src="../img/1.jpg" id="img">
	</div>
</body>
</html>

5.接下来我们就可以制作序号,序号使用absolute和div的relative形成关系,然后用bottom和right设置序号的位置,在使用float来使序号横向排列。最后使用hover来修改cursor为pointer表示鼠标放上去光标变为手的形状,并且改变背景颜色。

成品如下:

<!DOCTYPE html>
<html>
<head>
	<style>
		#container{
			width:474px;
			height:296px;
			border:1px solid red;
			margin:100px auto;
			position: relative;
		}
		.numlist{
			position: absolute;
			bottom: 0px;
			right:10px;
			list-style:none;
		}
		.numlist li{
			width: 20px;
			height:20px;
			margin-right:10px;
			border-radius: 50%;
			background: white;
			font-size: 20px;
			font-weight: 600;
			text-align: center;
			line-height:20px;
			float:left;
		}
		.numlist li:hover{
			cursor:pointer;
			background: grey;
		}
	</style>
</head>
<body>
<script>
window.onload=function(){
	var index = 0;
	var con = document.getElementById("container");
	var img1 = document.getElementById("i1");
	var img2 = document.getElementById("i2");
	var img3 = document.getElementById("i3");
	function change(){
		index = ++index%3;
		console.log(index);
		var img = document.getElementById("img");
		img.src="../img/"+index+".jpg";
	}
	var t = setInterval(change,1000);
	con.onmouseover = function(){
		window.clearInterval(t);
	};
	con.onmouseout = function(){
		t = setInterval(change,1000);
	};
	img1.onclick = function(){
		img.src="../img/0.jpg";
		index = 0;
	}
	img2.onclick = function(){
		img.src="../img/1.jpg";
		index = 1;
	}
	img3.onclick = function(){
		img.src="../img/2.jpg";
		index = 2;
	}
}
</script>
	<div id="container">
		<img src="../img/1.jpg" id="img">
		<div id="number">
			<ul class="numlist">
				<li id="i1">1</li>
				<li id="i2">2</li>
				<li id="i3">3</li>
			</ul>
		</div>
	</div>
</body>
</html>

4.关于对象的一些事件:

“onblur”: “元素失去焦点时触发的事件，例如文本框等输入控件失去焦点后会被触发”

“onfocus”: “元素获得焦点时触发的事件”

“onclick”: “元素被点击时触发的事件”

“onblclick”: “元素被双击时触发的事件”

“onkeydown”: “按键被按下时触发的事件”

“onkeyup”: “按键被释放时触发的事件”

“onkeypress”: “按键被按下并释放时触发的事件”

“onmousemove”: “鼠标移动时触发的事件”

“onmouseover”: “鼠标指针移动到元素上时触发的事件”

“onmousedown”: “鼠标按钮被按下时触发的事件”

“onmouseout”: “鼠标指针从元素移出时触发的事件”

“onmouseup”: “鼠标按钮被释放时触发的事件”

“onhelp”: 这是一个用户请求帮助时触发的事件。在程序中，这个事件可能会打开一个帮助文档或者提供一个支持服务的链接。例如，用户点击了程序中的帮助按钮，或者在程序界面上输入了’help’关键词。”

“ondragstart”: “这是一个拖动开始时触发的事件。在HTML5中，拖放功能被引入，允许用户从一个地方拖动元素到另一个地方。当拖动开始时，浏览器会触发一个名为’dragstart’的事件。开发者可以在此事件处理函数中获取拖动元素的相关信息，例如元素的id、拖动的起始位置等。”

“onselectstart”: “这意味着当用户在网页上点击并拖动鼠标来选择文本时，事件处理函数可以改变默认的文本选择行为，从而防止用户选择的文本被复制到剪贴板。”

document.getElementById('draggable-element').addEventListener("dragstart", function(event) {
});

这样就可以专门对某些元素进行选择和监视。

onload和onunload(关闭)是window特有的事件

本章完。

liyjioo

关注

5
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
BOM编程之Window对象

xxx
复制链接

扫一扫