07 BOM

BOM编程中，window对象是顶级对象，代表浏览器窗口

7.1 open与close

window有open和close方法，可以开启窗口和关闭窗口

• 打开window.open();
• 关闭window.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')"/>
1
2
3
4
5
6
7

当前窗口与顶级窗口

覆盖整个页面的窗口只有一个可以理解为顶级窗口

将当前窗口设置为顶级窗口 代码演示

if(window.top != window.self){
	//window.top = window.self;
	window.top.location = window.self.location;
}
1
2
3
4

7.2 弹出确认框

• 消息框window.alert(‘消息框!’)"
• 确认框window.confirm(“确认框”);

弹出消息框，之前都有用到

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

删除消息的确认框

<script type="text/javascript">
	function del(){
		/*
		var ok = window.confirm("亲，确认删除数据吗？");
		//alert(ok);
		if(ok){
			alert("delete data ....");
		}
		*/
		if(window.confirm("亲，确认删除数据吗？")){
			alert("delete data ....");
		}
	}
</script>
<input type="button" value="弹出确认框(删除)" onclick="del();" />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

7.3 历史记录

• 历史纪录的后退window.history.back()或者是window.history.go(-1)
• 历史纪录的前进window.history.go(1)

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

7.4 设置地址栏的url

var xx = window.location;
xx.href = "http://网址";
1
2

• 或者window.location.href = “http://网址”;
• 或者window.location = “http://网址”;
• 或者document.location.href = “http://网址”;同理href可以省略

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

表单form的提交。
超链接。

<a href="http://localhost:8080/oa/save?username=zhangsan&password=123">
    用户只能点击这个超链接
a>
1
2
3

document.location
window.location
window.open(“url”)
直接在浏览器地址栏上输入URL，然后回车。（这个也可以手动输入，提交数据也可以成为动态的。）
以上所有的请求方式均可以携带数据给服务器，只有通过表单提交的数据才是动态的