JavaScript部分内容4 — BOM编程

目录

open和close

 打开窗口

关闭窗口

弹出消息框和确认框

当前窗口设置为顶级窗口 

history对象

设置浏览器地址栏上的URL

---

open和close

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

 打开窗口

<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-open.html')"/>

关闭窗口

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

---

弹出消息框和确认框

<input type="button" value="弹出消息框" onclick="window.alert('消息框!')" />

删除操作的时候都要提前先得到用户的确认。

		<script type="text/javascript">
			function del(){

			    if(window.confirm("亲，确认删除数据吗？")){
			    	alert("delete data ....");
			    }
			}
		</script>

		<input type="button" value="弹出确认框(删除)" onclick="del();" />

---

当前窗口设置为顶级窗口 

 

		<!--窗体-->
<frameset cols="30%,*">
	<frame src="http://www.baidu.com" />
	<frame src="005-child-window.html" />
</frameset> 


<iframe src="005-child-window.html"></iframe>

                     if(window.top != window.self){
                        //window.top = window.self;
                        window.top.location = window.self.location;
                    }

		<script type="text/javascript">
			window.onload = function(){
				var btn = document.getElementById("btn");
				btn.onclick = function(){
					if(window.top != window.self){
						//window.top = window.self;
						window.top.location = window.self.location;
					}
				}	
			}
		</script>
		<input type="button" value="将当前窗口设置为顶级窗口" id="btn" />

点击后 

---

history对象

006页面：

		<a href="007.html">007页面</a>

		<input type="button" value="前进" onclick="window.history.go(1)"/> 

007页面

		007 page!

		<input type="button" value="后退" onclick="window.history.back()" />

		<input type="button" value="后退" onclick="window.history.go(-1)" />

设置浏览器地址栏上的URL

		<script type="text/javascript">
			function goBaidu(){
				//var locationObj = window.location;
				//locationObj.href = "http://www.baidu.com";
				
				// window.location.href = "http://www.jd.com";
				// window.location = "http://www.126.com";
				
				//document.location.href = "http://www.sina.com.cn";
				document.location = "http://www.tmall.com";
			}
		</script>
		
		<input type="button" value="新浪" onclick="goBaidu();"/>

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

        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，然后回车。（这个也可以手动输入，提交数据也可以成为动态的。）
        
        以上所有的请求方式均可以携带数据给服务器，只有通过表单提交的数据才是动态的。