JavaScript-BOM编程

五度鱼学Java

于 2022-09-30 20:35:52 发布

阅读量7.6k

点赞数 2

分类专栏： JavaScript 文章标签： javascript BOM

本文链接：https://blog.csdn.net/qq_46096136/article/details/127128768

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

一、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>

窗口测试.html

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

二、弹出确认框

示例代码：

<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>

在这里插入图片描述

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

核心语法：

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

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

}

示例代码：

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

顶级窗口测试页面.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>

在这里插入图片描述

四、历史记录

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>

历史测试页面.html:

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

在这里插入图片描述

五、设置浏览器地址栏上的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>

在这里插入图片描述

五度鱼学Java

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript-BOM编程

第四种方式：window.open(url,target) （了解）通过浏览器向服务器发送请求，通常是以上的五种方式。只有form可以动态的修改数据！2、window有open和close方法，可以开启窗口和关闭窗口。第一种方式：直接在浏览器地址栏上写URL。1、BOM编程中，window对象是顶级对象，代表浏览器窗口。跳转页面可以通过多种方式：（这些都是发送请求！第二种方式：可以点击超链接（重点）第三种方式：提交表单（重点）第五种方式：js代码（重点）
复制链接

扫一扫