Java教程

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

本文主要是介绍【JavaScript】笔记（6）--- BOM（open 与 close；弹出消息框和确认框；将窗口设置为顶级窗口；history 对象；设置浏览器地址栏上的URL），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

楔子：

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>

 

这篇关于【JavaScript】笔记（6）--- BOM（open 与 close；弹出消息框和确认框；将窗口设置为顶级窗口；history 对象；设置浏览器地址栏上的URL）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航