1. BOM编程window的open合close 45
当前窗口 _self
新窗口 _blank
父窗口 _parent
顶级窗口 _top
代码在course10 010 BOM编程的open和close
<!-- BOM编程的open和close 45 -->
<!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="打开验证open和close" onclick="window.open('011 验证open和close.html')"/>
</body>
</html>
011 验证open和close
<!-- 弹出消息框和确认框 46 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>弹出消息框和确认框</title>
</head>
<body>
<script type="text/javascript">
function del(){
/* var ok = window.confirm("亲，确认删除嘛？");//这个confirm函数会有返回值true和false
if(ok){
alert("正在删除……");
} */
//合再一起写
if(window.confirm("亲，确认删除嘛？")){
alert("正在删除……");
}
}
</script>
<input type="button" value="弹出消息框" onclick="window.alert('消息框')"/>
<!-- 删除操作前都要的到用户确认的 -->
<input type="button" value="弹出确认框(删除)" onclick="del();"/>
</body>
</html>
2. 弹出消息框和确认框 46
特别说明删除框需要的到用户的认可才可执行
相关函数 confirm() 这个confirm函数会有返回值true和false
代码在012 弹出消息框和确认框
</span><span style="white-space:pre;font-size:10.5pt;font-family:Monaco;font-weight:normal;font-style:normal;text-decoration:;color:#000000;background:;letter-spacing:0pt;mso-font-width:100%;vertical-align:baseline;text-decoration-color:;text-underline-position:" data-font-family='Monaco'>弹出消息框和确认框</span><span style="white-space:pre;font-size:10.5pt;font-family:Monaco;font-weight:normal;font-style:normal;text-decoration:;color:#990055;background:;letter-spacing:0pt;mso-font-width:100%;vertical-align:baseline;text-decoration-color:;text-underline-position:" data-font-family='Monaco'>
function del(){
/* var ok = window.confirm("亲，确认删除嘛？");//这个confirm函数会有返回值true和false
if(ok){
alert("正在删除……");
} */
//合再一起写
if(window.confirm("亲，确认删除嘛？")){
alert("正在删除……");
}
}3. history对象 47
3.1 两种写法
window.history.back()
window.history.go(-1)
代码在013 history对象
<!-- history对象 47 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>history对象</title>
</head>
<body>
<a href="013_1验证.html">013_1页面</a>
<!-- 前进 -->
<input type="button" value="前进" onclick="window.history.go(1)"/>
</body>
</html>
验证history对象 代码在013_1验证
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
013_1验证 <!-- history验证47 -->
<input type="button" value="后退" onclick="window.history.back()"/>
<!-- 另一种写法 -->
<input type="button" value="后退" onclick="window.history.go(-1)"/>
</body>
</html>
4.设置浏览器地址上的URL location对象 47
4.1 总结，有哪些方法可以通过浏览器往服务器发请求？
1、表单form的提交。
2、超链接。用户只能点击这个超链接
3、document.location
4、window.location
5、window.open("url")
6、直接在浏览器地址栏上输入URL，然后回车。（这个也可以手动输入，提交数据也可以成为动态的。）
以上所有的请求方式均可以携带数据给服务器，只有通过表单提交的数据才是动态的。
代码在 014 设置浏览器地址上的URL
<!-- 设置浏览器地址上的URL 47 -->
<!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";
//href可以省略不写
//window.location="http://www.baidu.com";
//document也有location函数对象
//document.location.href="http://www.baidu.com";
//同样href可以不写
document.location="http://www.baidu.com";
}
</script>
<input type="button" value="百度" onclick="goBaidu();"/>
<!-- 提一嘴open的使用 -->
<input type="button" value="百度2" 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，然后回车。（这个也可以手动输入，提交数据也可以成为动态的。）
以上所有的请求方式均可以携带数据给服务器，只有通过表单提交的数据才是动态的。
-->
5. 将当前窗口设置为顶级窗口 47补
代码在核心window.top.location=window.self.location
5.1 问题概述
代码在 015 将当前窗口设置为顶级窗口
<!-- 将当前窗口设置为顶级窗口 48 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 将当前窗口设置为顶级窗口</title>
</head>
<body>
<!-- 这里iframe不必纠结，是窗口嵌套语句 -->
<iframe src="015_1验证.html" width=500px" height="500px"></iframe>
</body>
</html>
代码在 015_1验证
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
015_1验证 <!-- 48 -->
<script type="text/javascript">
// 如果当前窗口不是顶级窗口,就将当前窗口设置为顶级窗口
function setTop(){
//window是当前浏览器窗口代表015_1验证窗口.html
//window.top就是当前窗口对应的顶级窗口 即015
//window.self表示当前自己这个窗口 即015_1
if(window.top != window.self){//如果当前窗口的顶级窗口不是自己
window.top.location=window.self.location;//将当前自己self这个窗口设置为顶级窗口top
}
}
</script>
<input type="button" value="如果当前窗口不是顶级窗口,就将当前窗口设置为顶级窗口" onclick="setTop();"/>
</body>
</html>