JS之浏览器对象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">
functionshowOutter(){
// 获得输入内容
varcontent = 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="显示到主窗体" onclick="showOutter();"/>
</body>

主窗体：1.html

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>父子窗体通信</title>
<script type="text/javascript">
functionshowContent(){
// 用主窗体读取子窗体内容
varcontent = window.frames[0].document.getElementById("content").value;
alert(content);
}
</script>
</head>
<body>
<h1>主窗体</h1>
<div id="info"></div>
<!-- 在主窗体中获得子窗体内容 -->
<input type="button" value="获取子窗体输入内容" onclick="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">
//用一个变量记录打开的网页
varopenNew;
functionopenWindow(){
openNew = window.open("http://www.itcast.cn");
}
//关闭的时候需要注意关闭的是打开的网页，而不是本身
functioncloseWindow(){
openNew.close();
}
</script>
</head>
<body>
<input type="button" value="打开传智播客网页" onclick="openWindow()">
<input type="button" value="关闭传智播客网页" onclick="closeWindow()">
</body>

③：window弹出对话框相关的3个方法

alert()警告框 confirm()确认框 prompt()输入框

<script type="text/javascript">
alert("这是警告框！")
varcon = confirm("你想好了吗？");
alert(con);
varmsg = prompt("请输入姓名","张三");
alert(msg);
</script>

④：定时操作setInterval & setTimeout

setInterval：定时任务会重复执行

setTimeout：定时任务只执行一次

在页面动态显示当前时间

<script type="text/javascript">
window.onload = function(){
vardate = newDate();
document.getElementById("time1").innerHTML =date.toLocaleString();
document.getElementById("time2").innerHTML =date.toLocaleString();
setInterval("show1();",1000); //间隔1秒后重复执行
setTimeout("show2();",1000); //1秒后执行，执行1次
}
functionshow1(){
vardate = newDate();
document.getElementById("time1").innerHTML =date.toLocaleString();
}
functionshow2(){
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="返回" onclick="history.back();" />
<input type="button" value="返回" onclick="history.go(-1);" />

3.Location 对象

代表浏览器导航在js函数中发起href链接效果

location.href='跳转后url' ; 等价于 <a href='xxx'></a>