【JavaScript】笔记(6)— BOM(open 与 close;弹出消息框和确认框;将窗口设置为顶级窗口;history 对象;设置浏览器地址栏上的URL)

  • A+
所属分类:Web前端
摘要

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

楔子:


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

 

一、open 与 close:


代码:

 <!DOCTYPE html> <html> 	<head> 		<meta charset="utf-8"> 		<title>BOM编程-open和close</title> 	</head> 	 	<body> 		<!-- 也可以open本地的html文件 --> 		<!-- 默认是新窗口 --> 		<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.close();" /> 	</body> </html>  

 

二、弹出消息框和确认框:


代码:

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

 

三、将窗口设置为顶级窗口:


顶级窗口的html:

<!DOCTYPE html> <html> 	<head> 		<meta charset="utf-8"> 		<title>顶级窗口</title> 	</head> 	 	<body> 		 		<!-- 子窗口为咱们自己写的本地html文件 --> 		<iframe src="015.html"></iframe> 	</body> </html>

 

子窗口的html:

<!DOCTYPE html> <html> 	<head> 		<meta charset="utf-8"> 		<title>子窗口</title> 	</head> 	<body> 		<script type="text/javascript"> 			 //将此窗口设置为顶级窗口 			 function jump(){ 				 if(window.top != window.self){ 					 window.top.location = window.self.location; 				 }					  			 } 		</script> 		 		<br /> 		<!-- 点击按钮,执行jump()函数 --> 		<input type="button" value="跳转为顶级窗口"  onclick="jump()" /> 	</body> </html>

 

四、history 对象:


最初的html:

<!DOCTYPE html> <html> 	<head> 		<meta charset="utf-8"> 		<title>最初的页面</title> 	</head> 	 	<body> 		<a href="001.html">跳转到有后退按钮的页面</a> 		 		<!-- 前进代码: --> 		<input type="button" value="前进" onclick="window.history.go(1)"/>  	</body> </html> 

 

跳转后的html:

<!DOCTYPE html> <html> 	<head> 		<meta charset="utf-8"> 		<title>跳转后的页面</title> 	</head> 	<body> 		<!-- 让页面倒退的两种代码: --> 		<input type="button" value="后退" onclick="window.history.go(-1)"/>  		 		<input type="button" value="后退" onclick="window.history.back()"/>  	</body> </html> 

 

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


总结,有哪些方法可以通过浏览器往服务器发请求?

        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,然后回车(这个也可以手动输入,提交数据也可以成为动态的)。

        以上所有的请求方式均可以携带数据给服务器,只有通过表单提交的数据才是动态的。

 

代码:

<!DOCTYPE html> <html> 	<head> 		<meta charset="utf-8"> 		<title>设置浏览器地址栏上的URL</title> 	</head> 	<body> 		 		<script type="text/javascript"> 			function goBaidu(){				 				/* 					第一种写法 					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="百度1" onclick="goBaidu();"/> 		 		<!-- 第五种写法 --> 		<input type="button" value="百度2" onclick="window.open('http://www.baidu.com');" /> 		 	</body> </html>