三、JS浏览器对象模型

最新推荐文章于 2024-02-04 10:50:40 发布

懒羊羊♛

最新推荐文章于 2024-02-04 10:50:40 发布

阅读量266

点赞数 1

分类专栏： HTML+CSS+JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_46596213/article/details/110506377

版权

HTML+CSS+JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一、
简称：BOM（BrowserObjectModel）
一个完整的BOM主要包括window对象（是整个BOM的顶层对象）、history对象、location对象、document对象等等。
小点：
（1）document对象就是下图红色框框包裹的区域（每个载入浏览器的 HTML 文档都会成为 Document 对象）
（2）window对象就是整个这个窗体（所有浏览器都支持 window 对象，它代表浏览器的窗口）
（3）windows对象是其他对象的基础（顶层对象），所以在调用其方法或者属性时，可以省略window对项名
即：window.alert(“你好”) ; 可以写成 alert(“你好”);
在这里插入图片描述
二、
BOM的主要功能如下：
（1）弹出新浏览器窗口
（2）移动、关闭和更改浏览器窗口大小
（3）可提供WEB浏览器详细信息的导航对象
（4）可提供浏览器载入页面详细信息的本地对象
（5）可提供用户屏幕分辨率详细信息的屏幕对象
（6）支持Cookies
（7）Internet Explorer对BOM进行扩展以包括ActiveX对象类，可以通过JavaScript来实现ActiveX对象

三、window对象
1、处于对象模型的第一层，对于每个打开的窗口系统都会自动将其定义为window对象
2、windows对象有一系列的属性，这些属性本身也是对象
3、常用属性及其含义：

属性	含义
document	窗口中当前显示的文档对象
history	history对象保存窗口最近加载的URL
location	当前窗口的URL
status	状态栏文本

4、常用方法及说明：

方法	说明
prompt()	显示可提示用户输入的对话框
alert()	显示带有一个提示消息和一个确定按钮的警示框
confirm()	显示一个带有提示信息、确定和取消按钮的确认框
close()	关闭浏览器窗口
open()	打开一个新的浏览器窗口，加载给定URL所指定的文档
setTimeout()	在设定毫秒数后，调用函数或计算表达式
setInterval()	按照设定的周期（以毫秒计）来重复调用函数或表达式
clearInterval()	取消重复设置，与setInterval()对应

注意：
（1）prompt()、alert()、confirm() 这个三个方法可以用来创建对话框：以下第五点
（2）close()、open() 操作窗口：以下第六点
（3）setTimeout()、setInterval()、clearInterval() 执行计时事件：以下第七点

5、使用window对象创建对话框
（1）alert()弹出警告对话框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var name="小明";
			var age=19;
			window.alert("我是："+name+"\n今年"+age+"岁");
		</script>
	</body>
</html>

效果图如下：
在这里插入图片描述
（2）prompt()方法创建提示对话框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
		var name=window.prompt("请输入姓名：");
		window.alert("欢迎您："+name);
		</script>
	</body>
</html>

效果图如下：
在这里插入图片描述
输入了1之后：

如果点取消：

即当用户点击确认，文本框的所有文本就成为了返回值；
点击取消按钮时，返回null;

（3）confirm()方法创建确认对话框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
		var flag=window.confirm("确认删除吗？");
		if(flag){
			window.alert("删除成功");
		}else{
			window.alert("已取消");
		}
		</script>
	</body>
</html>

效果图如下：
在这里插入图片描述
点击确认：（返回true）

点击取消：(返回false)

6、使用window对象操作窗口
（1）窗口的常见特征：

名称	说明
height、width	窗口文档显示区的高度、宽度，单位：px
left、top	窗口与屏幕左边、顶端的距离，单位：px

（2）
open()方法的返回值是打开window对象窗口
close()方法关闭窗口对象。
（3）
open()有三个参数，第一个参数是新窗口的URL，第二个参数是给新窗口的命名，第三个参数是设置新窗口的特征。（这3个参数是可以省略的）
close()方法中没有参数。
（4）举例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
		var W;
		window.onload=function(){
			W=window.open("new_file.html","new",
			"width=800,height=600,left=275,top=118");
		}
		</script>
		<h2>主页面</h2>
		<a href="javascript:Win.close()">关闭广告</a>
	</body>
</html>

new_file.html中的代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<img src="img/timg.jpg"/>
	</body>
</html>

效果图如下图所示：
在这里插入图片描述
点击关闭即可关闭当前弹出来的这个框

懒羊羊♛

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
三、JS浏览器对象模型

一、简称：BOM（BrowserObjectModel）一个完整的BOM主要包括window对象（是整个BOM的顶层对象）、history对象、location对象、document对象等等。小点：（1）document对象就是下图红色框框包裹的区域（每个载入浏览器的 HTML 文档都会成为 Document 对象）（2）window对象就是整个这个窗体（所有浏览器都支持 window 对象，它代表浏览器的窗口）（3）windows对象是其他对象的基础（顶层对象），所以在调用其方法或者属性时，可
复制链接

扫一扫