系列课程目录
第十二讲 BOM编程
目录
前言
JavaScript BOM编程提示:以下是本篇文章正文内容,下面案例可供参考
文章目录
一、什么是BOM
BOM(Browser Object Model)是指浏览器对象模型,可以对浏览器窗口进行访问和操作。使用 BOM,开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。
1.BOM对象模型结构
2.window对象
BOM 的操作入口为 window 对象,即浏览器下的全局对象
window对象有有以下特点:
- 所有浏览器都支持 window 对象。它表示浏览器窗口
- 一个html文档对应一个window对象
- 控制浏览器窗口的window对象不需要创建对象,直接使用即可
- 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员
许多常用的方法都是挂载在window对象上的方法,比如alert()、prompt()、setInterval()、setTimeout()等方法,都是挂载在window对象上的全局方法,调用时完整语句为wimdow.alert()等,但是在实际使用时可以省略前面的window。
3.全局变量
将变量挂载到window对象上即为全局变量
声明在函数内的变量为局部变量
将变量挂载到window对象上即为全局变量
可省略window,即隐式声明
4.window对象常用方法
window.open()
打开一个新窗口
window.close()
关闭当前窗口
window.open(URL,name,param)
练习:两个按钮,对应不同的网址,新窗口大小为800*600,位置为距左侧200px、距顶部300px
无论点击任意按钮任意次,都只会打开同一个窗口
5 .window对象常用属性
大多数修改窗口大小或位置的方法,目前已被主流浏览器禁用,对非window.open方法打开的窗口不能使用
6.window对象常用事件
使用方法:
window.onload//用于在网页加载完毕后立刻执行的操作
//使用方法: window.οnlοad=函数名 *不加() 或window.οnlοad=匿名函数
7.location对象
操作当前窗口的地址信息
8.navigator对象
运行当前代码的客户端浏览器的相关信息
9.screen对象
运行当前代码的客户端浏览器的相关信息
10.history对象
当前窗口的浏览历史记录
练习:创建3个页面,通过超链接访问,添加前进和后退按钮实现前进或后退功能
11.frames框架
如果页面中包含框架,则每个框架都拥有自己的window对象,并且保存在frames集合中
<iframe src="1.heml" name="frame1" ></iframe>
在父页面中,可通过window.frames[“frame1”]访问子页面的window对象(需等frame加载完毕)
在子页面中,可通过window.parent访问父页面的window对象(需等frame加载完毕)
二、课堂作业
1.按照要求完成任务
如下(示例):
2.解析代码
- 任务12-1
//父页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1 id="f">123</h1>
修改子页面内容:<input type="text" name="" id="ftext" value="" />
<input type="button" name="" id="" value="修改"onclick="xg()" />
<br>
<iframe src="z.html" id="z1"></iframe>
</body>
<script type="text/javascript">
function xg(){
document.getElementById("z1").contentWindow.document.getElementById("z").innerHTML=document.getElementById("ftext").value;
}
</script>
</html>
//子页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1 id="z">123</h1>
修改父页面内容:<input type="text" name="" id="ztext" value="" />
<input type="button" name="" id="" value="修改"onclick="xg()" />
<br>
</body>
<script type="text/javascript">
function xg(){
window.parent.document.getElementById("f").innerHTML=document.getElementById("ztext").value;
}
</script>
</html>