JavaScript笔记--- BOM（open 与 close；弹出消息框和确认框；将窗口设置为顶级窗口；history 对象；设置浏览器地址栏上的URL）
Posted 猿头猿脑的王狗蛋
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript笔记--- 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笔记--- BOM（open 与 close；弹出消息框和确认框；将窗口设置为顶级窗口；history 对象；设置浏览器地址栏上的URL）的主要内容，如果未能解决你的问题，请参考以下文章