JavaScript浏览器对象BOM
DOM Window 代表窗体
DOM History 历史记录
DOM Location 浏览器导航
重点：window、history、location ，最重要的是window对象
1.window对象
Window 对象表示浏览器中打开的窗口，如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象
window.frames 返回窗口中所有命名的框架
parent是父窗口（如果窗口是顶级窗口，那么parent==self==top）
top是最顶级父窗口（有的窗口中套了好几层frameset或者iframe）
self是当前窗口（等价window）
opener是用open方法打开当前窗口的那个窗口
①：父子窗体之间的通讯
在页面内嵌入一个iframe，在iframe中提供一个输入项，输入后，在iframe外面窗口中显示内容
显示结果如上图所示，实现思路如下：
子窗体：2.html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>Untitled Document</title>
<script type="text/javascript">
function showOutter(){
// 获得输入内容
var content = document.getElementById("content").value;
// 将输入的内容显示到主窗体info 中
window.parent.document.getElementById("info").innerHTML = content;
}
</script>
</head>
<body>
<h1>子窗体</h1>
<input type="text" id="content" />
<input type="button" value="显示到主窗体" οnclick="showOutter();"/>
</body>
主窗体：1.html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>父子窗体通信</title>
<script type="text/javascript">
function showContent(){
// 用主窗体读取子窗体内容
var content = window.frames[0].document.getElementById("content").value;
alert(content);
}
</script>
</head>
<body>
<h1>主窗体</h1>
<div id="info"></div>
<!-- 在主窗体中获得子窗体内容 -->
<input type="button" value="获取子窗体输入内容" οnclick="showContent();" />
<iframe src="2.html"></iframe>
</body>
②：window的open close
<head>
<title>打开关闭窗体</title>
<meta http-equiv="content-type" content="text/html; charset=gbk">
<script type="text/javascript">
//用一个变量记录打开的网页
var openNew;
function openWindow(){
openNew = window.open("http://www.itcast.cn");
}
//关闭的时候需要注意关闭的是打开的网页，而不是本身
function closeWindow(){
openNew.close();
}
</script>
</head>
<body>
<input type="button" value="打开传智播客网页" οnclick="openWindow()">
<input type="button" value="关闭传智播客网页" οnclick="closeWindow()">
</body>
③：window弹出对话框相关的3个方法
alert()警告框 confirm()确认框 prompt()输入框
<script type="text/javascript">
alert("这是警告框！")
var con = confirm("你想好了吗？");
alert(con);
var msg = prompt("请输入姓名","张三");
alert(msg);
</script>
④：定时操作setInterval & setTimeout
setInterval：定时任务会重复执行
setTimeout：定时任务只执行一次
在页面动态显示当前时间
<script type="text/javascript">
window.onload = function(){
var date = newDate();
document.getElementById("time1").innerHTML =date.toLocaleString();
document.getElementById("time2").innerHTML =date.toLocaleString();
setInterval("show1();",1000); //间隔1秒后重复执行
setTimeout("show2();",1000); //1秒后执行，执行1次
}
function show1(){
vardate = newDate();
document.getElementById("time1").innerHTML =date.toLocaleString();
}
function show2(){
vardate = newDate();
document.getElementById("time2").innerHTML =date.toLocaleString();
setTimeout("show2();",1000);//不终止
}
</script>
<body>
<div id="time1"></div>
<div id="time2"></div>
</body>
2.history 对象
代表历史记录，常用来制作页面中返回按钮
<input type="button" value="返回" οnclick="history.back();" />
<input type="button" value="返回" οnclick="history.go(-1);" />
3.Location 对象
代表浏览器导航 在js函数中发起href链接效果
location.href='跳转后url' ; 等价于 <a href='xxx'></a>