第十二讲 BOM编程

最新推荐文章于 2023-07-06 16:06:17 发布

鵼鷡

最新推荐文章于 2023-07-06 16:06:17 发布

阅读量175

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/llXlI/article/details/115679735

版权

系列课程目录

第十二讲 BOM编程

前言

JavaScript BOM编程

提示：以下是本篇文章正文内容，下面案例可供参考

文章目录

系列课程目录
前言
一、什么是BOM
二、课堂作业
- 1.按照要求完成任务
- 2.解析代码

一、什么是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>

鵼鷡

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
第十二讲 BOM编程

系列课程目录第十二讲 BOM编程目录系列课程目录前言一、什么是BOM1.BOM对象模型结构2.window对象3.全局变量4.window对象常用方法5 .window对象常用属性6.window对象常用事件7.location对象8.navigator对象9.screen对象10.history对象11.frames框架二、课堂作业1.按照要求完成任务2.解析代码前言JavaScript BOM编程提示：以下是本篇文章正文内容，下面案例可供参考文章目录系列课程目录前言一、什么是BOM
复制链接

扫一扫