BOM
window对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BOM</title>
</head>
<body>
<script type="text/javascript">
//1 如何获得window对象
//window对象 由浏览器创建.当浏览器加载页面时,浏览器会立刻自动创建window对象.
// 如果要获得,直接使用即可.
//2 window中的方法
// alert
// confirm 弹出确认框
// prompt 弹出一个输入框 返回值为str. 点击取消返回null.
//---------------------------------
var b = confirm("您确定要删除吗?");
alert(b);
//---------------------------------
var str = prompt("请输入一个整数!","0");
alert(typeof str); // 确定就是string,取消就是object
//-------------------------------------------------------------------------
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>window对象</title>
</head>
<body>
<!--open打开一个新窗口,close当前关闭窗口-->
<script type="text/javascript">
function close2() {
window.close();
}
/* open()返回值是window对象,即新打开的窗口
参数:1、打开的url,2、窗口名称即name属性 3、窗口的长宽 4、是否将新窗口的地址加入浏览器历史记录中
*/
function open2() {
window.open("BOM.html");
}
</script>
<script type="text/javascript">
// setInterval和setInterval
// 定时器方法, 每2000毫秒后alert一次
// 参数1,可以是一般的String,内容是js代码;也可以是一个函数,参数2,间隔毫秒
// 返回当前定时器的id
var id = window.setInterval("alert('haha')", 2000)
function stop() {
window.clearInterval(id);
}
// setTimeout和clearTimeout
// 比较setInterval和setInterval,唯一的区别就是timeout是指执行一次,而intenval是每隔一段时间就执行一次
</script>
<input type="button" onclick="stop();" value="停止计时器">
<input type="button" onclick="open2();" value="新建窗口">
</body>
</html>
history对象
当前页面,具有前进按钮。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1</title>
</head>
<body>
<a href="history对象2.html">点我前进</a>
<input type="button" onclick="window.history.forward();" value="前进">
<!--go(1)表示前进1页,就是下一页,可以传入-1就是上一页-->
<input type="button" onclick="window.history.go(1);" value="前进2">
</body>
</html>
页面2,具有后退按钮。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2</title>
</head>
<body>
<input type="button" onclick="window.history.back();" value="后退">
<input type="button" onclick="window.history.go(-1);" value="后退2">
</body>
</html>
页面之间的交互,需要获取window对象,如下图,分别为盒子模型和单个页面的模型。
location对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--assign加载新的文档
reload重新加载当前文档-->
<input type="button" onclick="window.location.href='window对象.html'" value="window对象.html" />
<input type="button" onclick="window.location.assign('window对象.html')" value="assign" />
<input type="button" onclick="window.location.reload()" value="刷新" />
</body>
</html>
2017.3.9
by @sunhaiyu