JavaScript的bom对象
JavaScript中的BOM对象，什么是BOM？ BOM是browser object model的缩写，简称浏览器对象模型
BOM提供了独立于内容，而和浏览器窗口交互的对象，用于管理窗口之间的通信，核心是window
【1】打开窗口和控制窗口大小
使用window.open来打开窗口，并控制窗口的大小，猜数字.html是上一级目录下的文件
<span style="font-size:18px;"><html>
<head>
<title>01-Window对象</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function close2(){
window.close();
}
function open2(){
// 引用上层目录下猜数字.html文件
window.open("../猜数字.html", "",'width=100,height=100');
}
</script>
</head>
<body>
<input type="button" onclick="close2();" value="关闭当前窗口" />
<input type="button" onclick="open2();" value="打开猜数字窗口" />
</body>
</html></span>
【2】定时弹出功能
setInterval和clearInterval是控制定时的两个功能，一个打开一个关闭定时器，他们都是通过控制ID来控制定时器
<span style="font-size:18px;"><!DOCTYPE html>
<html>
<head>
<title>02-Window对象02.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
// 两秒后弹出abc
var id = window.setInterval("alert('abc')", 2000);
function stop(){
让abc停止弹出
window.clearInterval(id);
}
</script>
</head>
<body>
<input type="button" onclick="stop();" value="停止" />
</body>
</html>
</span>
【3】定时器调用的两种效果
这两种方式的调用效果是相同的，加不加引号都一样
<span style="font-size:18px;"><!DOCTYPE html>
<html>
<head>
<title>02-Window对象02.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
//window对象
function fun1(){
alert("fun1!!!!");
}
//参数1: 也可以接受一个函数类型的对象
// 如下两行代码,执行效果是一样的
//window.setInterval(fun1, 2000)
window.setInterval("fun1()", 2000)
</script>
</head>
<body>
</body>
</html></span>
【4】控制网页的前进后退
这个选项还是比较重要的，我们浏览网页的时候会经常使用到，window.history.forward/go(1)
<span style="font-size:18px;"><!DOCTYPE html>
<html>
<head>
<title>02-Window对象02.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
</script>
</head>
<body>
<a href="06-history对象02.html" >点击就会前进</a>
<input type="button" onclick="window.history.forward()" value="前进" />
<input type="button" onclick="window.history.go(1)" value="前进" />
</body>
</html>
</span>
上面的是前进的 ，那个下边的就是后退的了 window.history.back
<span style="font-size:18px;"><!DOCTYPE html> <html> <head> <title>02-Window对象02.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <span style="white-space:pre"> </span><script type="text/javascript"> <span style="white-space:pre"> </span></script> </head> <body> <span style="white-space:pre"> </span><input type="button" onclick="window.history.back()" value="后退" /> <span style="white-space:pre"> </span><input type="button" onclick="window.history.go(-1)" value="后退" /> </body> </html> </span>
【5】超链接和刷新
其中href和assign都是起到超链接的作用
<span style="font-size:18px;"><!DOCTYPE html>
<html>
<head>
<title>02-Window对象02.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
// 下面的 herf 和 assign 都是起到超链接的作用
</script>
</head>
<body>
<input type="button" onclick="window.location.href='01-Window对象.html'" value="01-Window对象.html" />
<input type="button" onclick="window.location.assign('01-Window对象.html')" value="01-Window对象.html" />
<input type="button" onclick="window.location.reload()" value="刷新" />
</body>
</html></span>