Web基础 ( 五 ) JavaScript BOM

春哥的魔法书

已于 2023-05-28 20:32:46 修改

阅读量728

点赞数 1

分类专栏： web基础 javascript 文章标签： javascript 前端 BOM

于 2023-05-17 22:00:04 首次发布

本文链接：https://blog.csdn.net/yuanchun05/article/details/130735740

版权

javascript 同时被 2 个专栏收录

20 篇文章 2 订阅

订阅专栏

web基础

16 篇文章 1 订阅

订阅专栏

4.4.BOM浏览器对象模型

window代表窗体, 内置多种对象, 每种对象包含多种方法及属性

4.4.1.location 地址栏

window.location.href = "url";  // 当前窗口加载指定的页面

location.reload(); //刷新

4.4.2.history 访问历史记录

window.history.back();  // 返回上一页面

window.history.forward();  // 前进到下一页面

window.history.go(-1);  // 向前或者向后跳转几个页面

window.history.length;  // 总访问数

在这里插入图片描述

4.4.3.时间处理

4.4.3.1.延时效果:

ident=window.setTimeout("alert('延时弹出')",1000);

window.clearTimeout(ident); // 取消延时效果

4.4.3.2.定时效果:

iv=window.setInterval("console.log('定时弹出')",1000);

window.clearInterval(iv); // 取消定时效果

4.4.4.对话窗口

4.4.4.1.警告(提示)窗

window.alert("提示内容");  // 警告提示窗

在这里插入图片描述

4.4.4.2.确认窗

window.confirm("你确定吗?");  // 确认窗口

在这里插入图片描述

4.4.4.3.输入窗

 window.prompt("请输入"); // 输入窗口

在这里插入图片描述

以上三种窗口弹出时, 程序暂停进行

4.4.4.4.控制台 console

控制台输出 console.log(); console.info() console.error()

在这里插入图片描述

注意: 是浏览器的控制台, 打开”开发者工具”才能看到

4.4.4.5.在窗体中生成HTML元素

document.write("<input>")

4.4.5.窗体

4.4.5.1.弹出页面 open

op = window.open("open1.html"); // 弹出窗体

4.4.5.2.框架页

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<frameset  rows="80,*">
	<frame  src="top.html" name="top"/>
	<frameset  cols="180,*">
		<frame src="left.html" name="left"  />
		<frame src="right.html"  name="right"/>
	</frameset>
</frameset>
</html>

4.4.5.3.iframe 内嵌页

<iframe name="标识" src="页面路径" width="" height=""></iframe>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<span>这是一个iframe页面</span>
		<iframe src="child.html" frameborder="1"></iframe>
	</body>
</html>

4.4.5.4.父窗口操作子窗口

通过 iframe 的 name 属性得到子窗口

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<span>这是一个iframe页面</span> 
		<button type="button" onclick="fn()">load iframe</button>
		<iframe name="ifr"  frameborder="1"></iframe>
	</body>
	<script>
		function fn(){
			ifr.location.href="child.html"
		}
	</script>
</html>

4.4.5.5.子窗口操作父窗口

在子窗口中通过 parent 得到父窗口

父窗口 main.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<span>这是一个iframe页面</span> 
		
		<button type="button" onclick="fn()">load iframe</button>
		<iframe name="ifr" src="child.html" frameborder="1"></iframe>
	</body>
	<script>
	
		function ff(){
			console.log("这是父窗口")
		}
	</script>
</html>

子窗口 child.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button" onclick="fn()" >按钮</button>
	</body>
	<script>
		function fn(){
			parent.ff();
		}
	</script>
</html>