一、
简称: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>
效果图如下图所示:
点击关闭即可关闭当前弹出来的这个框