JavaScript-BOM-老杜-笔记

最新推荐文章于 2023-06-30 08:22:29 发布

yiersano

最新推荐文章于 2023-06-30 08:22:29 发布

阅读量199

点赞数

分类专栏： JavaScript 文章标签： javascript 服务器

本文链接：https://blog.csdn.net/yiersano/article/details/125083484

版权

JavaScript 专栏收录该内容

4 篇文章 2 订阅

订阅专栏

文章目录

1、open和close
2、弹出消息框和确认框
3、当前窗口设置为顶级窗口
4、history对象
5、设置浏览器地址栏上的URL

1、open和close

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>BOM编程-open和close</title>
	</head>
	<body>
		<script type="text/javascript">
			/*
				1、BOM编程中，window对象是顶级对象，代表浏览器窗口。
				2、window有open和close方法，可以开启窗口和关闭窗口。
			*/
		</script>
		<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('002-close.html');"/>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>close</title>
	</head>
	<body>
		<input type="button" value="关闭当前窗口" onclick="window.close();"/>
	</body>
</html>

2、弹出消息框和确认框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹出消息框和确认框</title>
	</head>
	<body>
		<script type="text/javascript">
			function del(){
				/* var ok = window.confirm("是否删除数据？");
				//alert(ok);
				if(ok){
					alert("delete data 。。。");
				}else {
					//alert("取消删除")
				}
				*/
				if(window.confirm("是否删除数据？")){
					alert("delete data 。。。");
				}
			}
		</script>
		<input type="button" value="弹出消息框" onclick="window.alert('这是一个消息框')"/>
		<!--删除操作的时候都要提前先得到用户的确认。-->
		<input type="button" value="弹出确认框" onclick="del()"/>
	</body>
</html>

效果
在这里插入图片描述

3、当前窗口设置为顶级窗口

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>当前窗口设置为顶级窗口</title>
	</head>
	<body>
		<iframe src="005-child window.html" width="500px" height="500px"></iframe>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>005</title>
	</head>
	<body>
		005页面
		<script type="text/javascript">
			function setTop(){
				if(window.top != window.self){
					window.top.location = window.self.location;
				}
			}
		</script>
		<input type="button"  onclick="setTop()" value="将当前窗口设置为顶级窗口"/>
		
	</body>
</html>

效果
在这里插入图片描述

4、history对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>history对象</title>
	</head>
	<body>
		<script></script>
		<a href="007.html">007页面</a>
		<input type="button" value="前进" onclick="window.history.go(1)"/>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>007</title>
	</head>
	<body>
		007 page!
		<input type="button" value="后退" onclick="window.history.back()"/>
		<input type="button" value="后退" onclick="window.history.go(-1)"/>
	</body>
</html>

效果

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设置浏览器地址栏上的URL</title>
	</head>
	<body>
		<script type="text/javascript">
			function goBaidu (){
			 var locationObj = window.location;
			 	locationObj.href = "http://www.baidu.com";
			
			 window.location.href = "http://www.baidu.com";
			
			 window.location = "http://www.baidu.com";
			
		     document.location.href = "http://www.baidu.com";
			
			 document.location = "http://www.baidu.com";
			}
		</script>
		
		<input type="button" value="百度" onclick="goBaidu()"/>
		<input type="button" value="百度" onclick="window.open('http://www.baidu.com');"/>
	</body>
</html>
<!--
	总结，有哪些方法可以通过浏览器往服务器发请求？
		1、表单form的提交。
		2、超链接。<a href="http://localhost:8080/oa/save?username=zhangsan&password=123">用户只能点击这个超链接</a>
		3、document.location
		4、window.location
		5、window.open("url")
		6、直接在浏览器地址栏上输入URL，然后回车。（这个也可以手动输入，提交数据也可以成为动态的。）
		
		以上所有的请求方式均可以携带数据给服务器，只有通过表单提交的数据才是动态的。
-->