JavaScript-BOM编程

文章目录

一、window.open和window.close
二、弹出确认框
三、如果当前窗口不是顶级窗口，将当前窗口设置为顶级窗口
四、历史记录
五、设置浏览器地址栏上的URL

一、window.open和window.close

1、BOM编程中，window对象是顶级对象，代表浏览器窗口
2、window有open和close方法，可以开启窗口和关闭窗口

示例代码：

<body>
<input type="button" value="开启百度(新窗口)" onclick="window.open('http://www.baidu.com');" />
		<input type="button" value="开启百度当前窗口" onclick="window.open('http://www.baidu.com','_self');" />
		<input type="button" value="开启百度(新窗口)" onclick="window.open('http://www.baidu.com','_blank');" />
		<input type="button" value="开启百度(父窗口)" onclick="window.open('http://www.baidu.com','_parent');" />
		<input type="button" value="开启百度(顶级窗口)" onclick="window.open('http://www.baidu.com','_top');" />
		
		<input type="button" value="开启指定窗口" onclick="window.open('SSS-open窗口测试.html');" />
</body>
1
2
3
4
5
6
7
8
9

窗口测试.html

<body>
		<input type="button" value="关闭指定窗口" onclick="window.close();">
	</body>
1
2
3

二、弹出确认框

示例代码：

<body>
		<script type="text/javascript">
			function del(){
				/* var ok = window.confirm("亲，你确认删除此消息吗？");
				if(ok){
					alert("正在删除数据！");
				}
			} */
			//优化
			if(window.confirm("亲，你确认删除此消息吗？")){
				alert("正在删除数据！");
				}
			}
		</script>
		<input type="button" value="弹出警示框" onclick="window.alert('警示信息!');" /> 
		
		<!-- 删除操作的时候都要提前先得到用户的确认 -->
		<input type="button" value="弹出确认框(删除)" onclick="window.del();" /> 
	</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

在这里插入图片描述

三、如果当前窗口不是顶级窗口，将当前窗口设置为顶级窗口

核心语法：

if(window.top != window.self){

window.top. location = window.self. location;

}

示例代码：

<body>
		<iframe src="007-顶级窗口测试页面.html" width="500px" height="500px"></iframe>
	</body>
1
2
3

顶级窗口测试页面.html：

<body>
		<script type="text/javascript">
			//如果当前这个窗口不是顶级窗口的话,将当前窗口设置为顶级窗口.
			function setTop(){
				//window是当前浏览器的窗口,代表007.html
				//"当前窗口的顶级窗口"如果"不是自己"
				//window.top就是当前窗口对应的顶级窗口
				//window.self表示当前自己这个窗口
				//window.top 是006窗口
				//window.self 是007窗口
				if(window.top != window.self){
					window.top.location = window.self.location;
					}
			}
		</script>
		007-html
		<input type="button" value="把不是顶级窗口的设置成顶级窗口" onclick="setTop();">
	</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在这里插入图片描述

四、历史记录

window.history.back(); window.history.go(-1); window.history.go(1);

示例代码：

<body>
		<a href="004-history测试页面.html">004-history测试呀！</a>
		<!-- 前进不常用！！！！！ -->
		<input type="button" value="前进" onclick="window.history.go(1)" />
	</body>
1
2
3
4
5

历史测试页面.html:

<body>
		004 page!
		<input type="button" value="后退" onclick="window.history.back();" />
		<input type="button" value="后退" onclick="window.history.go(-1);" />
	</body>
1
2
3
4
5

在这里插入图片描述

五、设置浏览器地址栏上的URL

跳转页面可以通过多种方式：（这些都是发送请求！！！！）
第一种方式：直接在浏览器地址栏上写URL。（重点）

第二种方式：可以点击超链接（重点）

第三种方式：提交表单（重点）

第四种方式：window.open(url,target) （了解）

第五种方式：js代码（重点）

window.location.href
window.location
document.location.href
document.location

通过浏览器向服务器发送请求，通常是以上的五种方式。只有form可以动态的修改数据！
示例代码：

<body>
		<script type="text/javascript">
			function goBaidu(){
				/* var locationS = window.location;
				locationS.href = "http://www.baidu.com"; */
				
				// window.location.href = "http://www.126.com";
				// window.location = "http://www.126.com";
				
				//document.location.href = "http://www.baidu.com";
				document.location = "http://www.baidu.com";
				
				
				}
		</script>
		<input type="button" value="百度" onclick="goBaidu();" />
	</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

在这里插入图片描述

相关阅读:
Redis接口限流、分布式锁与幂等
Leetcode 【1155. 掷骰子等于目标和的方法数】
基于SSH开发在线问卷调查系统
网络安全（黑客）自学
vim 从嫌弃到依赖(19)——替换
mysql的主从复制
Python异步编程之web框架异步vs同步数据库IO任务并发支持对比
鸿蒙开发基础认证课后习题汇总
mybatis中#与$的区别
JavaWeb、JSP

原文地址：https://blog.csdn.net/qq_46096136/article/details/127128768