一、BOM对象模型
什么是BOM
BOM(Browser Object Model):浏览器对象模型
可以对浏览器窗口进行访问和操作。使用 BOM,开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。
以下是BOM对象模型如下图
window对象
window对象就是BOM的操作入口,即浏览器下的全局对象,window对象有以下特性
1、所有浏览器都支持 window 对象。它代表浏览器的窗口。
2、所有全局 JavaScript 对象,函数和变量自动成为 window 对象的成员。
3、全局变量是 window 对象的属性。
4、全局函数是 window 对象的方法。
5、(HTML DOM 的)document 对象也是 window 对象属性
document.getElementById("header");
//等同于
window.document.getElementById("header");
//只是省去了window名字
如alert()、prompt()、setInterval()、setTimeout()等方法,都是挂载在window对象上的全局方法
全局变量与局部变量
全局变量有两种声明方式:
1、声明在最外层的变量为全局变量
2、将变量挂载到window对象上也是全局变量
<script>
var a='global'; //声明在外面,是为全局变量
console.log(a);
function myTimer() {
var a='local'; //声明在函数体内,是为局部变量
console.log(a);
window.b='window的global'; //window对象做前缀的变量是为全局变量,前面不用写var
}
console.log(b);
除此之外,其实还有一种声明全局变量的方式,即隐式声明
function myTimer() {
a='local'; //声明在函数体内,是为局部变量
}
console.log(a);//可以访问,但不推荐使用
但是隐式声明变量有很多弊端,所以并不推荐使用
window对象常用方法
1、window.open():打开一个新窗口
格式:window.open(URL,name,param)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="我是百度" onclick="myTimer()" />
<input type="button" value="我才是百度" onclick="myTimer()" />
<script>
function myTimer() {
window.open('https://www.baidu.com', 'page1', 'width=800,height=300,left=140,top=120');
window.open('https://www.baidu.com', 'page1', 'width=800,height=300,left=140,top=120');
}
myTimer();
</script>
</body>
</html>
参数 | 说明 | 值 |
---|---|---|
URL | 要在新窗口显示的文档的URL | 网址、页面路径 |
name | 新窗口的名称 | 例如:page1 |
param | width、height、left、top等属性的值 | 例如:width=300,height=200(不用写px) |
大多数修改窗口大小或位置的方法,目前已被主流浏览器禁用,window.open()方法除外
window对象常用的属性
属性 | 说明 |
---|---|
name | 返回窗口的名称 |
innerHeight、innerWidth | 返回窗口的内部高 |
outerHeight、outerWidth | 返回窗口的外部高 |
screenX,screenY,screenLeft,screenTop | 返回窗口左上角再屏幕上的位置 |
window对象的常用事件和对象
1、window.onload():页面加载完毕后立刻执行操作
使用方法:window.οnlοad=函数名 (不加()) 或window.οnlοad=匿名函数
window.onload()的用法主要可以用于需要等待页面加载完成之后再进行操作的动作
Location对象
属性 | 说明 |
---|---|
href | 返回当前窗口的完整url地址,可通过修改值达到页面跳转的目的 |
host | 返回当前窗口的主机名 例如xxx.xx.xx.xx:端口号 |
pathname | 返回资源路径地址,即主机名后面的部分 |
port | 返回端口,常见端口如HTTP端口为80,HTTPS端口为443 |
navigator对象
属性 | 说明 |
---|---|
userAgent | 返回用户代理信息,包含操作系统、浏览器内核、浏览器版本、CPU类型等 |
onLine | 是否连接了因特网,是则返回true,否则返回false |
cookieEnabled | 是否启用cookie,是则返回true,否则返回false |
language | 浏览器主语言 |
screen对象
属性 | 说明 |
---|---|
width、height | 屏幕宽高 |
availWidth、availHeight | 屏幕可用宽高(不包含任务栏) |
history对象
属性 | 说明 |
---|---|
length | 历史浏览数目 |
方法 | 说明 |
– | – |
back() | 后退一页 |
forward() | 前进一页 |
go() | 跳转到指定页数,参数为负代表后退,参数为正代表前进 |
一般来说只用window.history.go()就行了。
后退:window.history.go(-1)
前进:window.history.go(1)
frames框架
如果页面中包含框架,则每个框架都拥有自己的window对象,并且保存在frames集合中
frames框架的声明格式:
<iframe src="2.html" name="frame1"></iframe>
//src中的URL代表你要在iframe框架中显示的具体页面内容。name属性在调用框架时经常会使用
在父页面中,可通过 window.frames[“frame1”] 访问子页面的window对象(需等frame加载完毕)
在子页面中,可通过 window.parent 访问父页面的window对象(需等frame加载完毕)
练习题:
//父页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
修改子页面里面的内容:<input type="text" id="t1" />
<input type="button" value="修改" onclick="dis1()" />
<p id="result1"></p>
<iframe src="son.html" name="iframe1" width="500" height="300"></iframe>
<script type="text/javascript">
function dis1(){
var father=document.getElementById('t1').value;
window.frames['iframe1'].document.getElementById('result2').innerHTML=father;
}
</script>
</body>
</html>
//子页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
修改父页面里面的内容:<input type="text" id="t2" />
<input type="button" value="修改" onclick="dis2()" />
<p id="result2"></p>
<script type="text/javascript">
function dis2(){
var son=document.getElementById('t2').value;
parent.window.document.getElementById('result1').innerHTML=son;
}
</script>
</body>
</html>
运行之后输出的效果如下