BOM的概述
browser object modal :浏览器对象模型。浏览器对象：window对象。
Window 对象会在 <body> 或 <frameset> 每次出现时被自动创建。
1. window的属性
innerHeight:innerWidth: IE不支持
通用写法：document.body.clientWidth
document.body.clientHeight self :等同于window对象
parent：是打开窗口的父窗口对象
opener：是打开窗口的父窗口对象。
2种情况下使用opener:
1.使用winodw.open()方法打开的页面2种情况下使用parent:
2.超链（里面的target属性要设置成_blank）
1.iframe 框架frames[]: 数组类型，代表子窗口的window对象的集合,可以通过frames[索引]拿到子窗口的window对象。
2.frame 框架
示例：父子窗口相互传参.
open方法，是打开一个页面.
</head>
<script type="text/javascript">
<!--
/*
window对象的属性：
1.innerHeight: 返回文档显示区的高度
2.innerWidth: 返回文档显示区的宽度 IE不支持
通用写法： window.document.body.clientWidth ;
3. outerheight 包括了工具栏，菜单栏等的高度
4. outerwidth 包括滚动条的宽度
*/
function init(){
var x = window.document.body.clientWidth ;
var y = window.document.body.clientHeight ;
alert(x + ":" + y) ;
}
//-->
</script>
<body onload = "init()">
<p>你好</p>
</body>
</html>将子窗口中的文本框中的数据传递到父窗口中的文本框中显示
父窗口：
</head>
<script type="text/javascript">
<!--
/*
window对象的属性: 1. opener: 代表的是父窗口.window
应用opener，必须要求两个窗口有父子关系
1.超链接(设置target属性为_blank)
2.window.open()打开的窗口
2. parent: 代表的是父窗口.window
使用地方：1. 框架中
2. 内嵌框架
3. frames[]: 拿到子窗口
*/
function fun(){
window.open("sub.html") ;
}
//-->
</script>
<body>
<input type="text" name="" id = "txt">
<input type="button" value="打开sub.html页面" οnclick="fun()">
<a href = "sub.html" target = "_blank">打开sub.html页面</a>
</body>
</html></head>
<script type="text/javascript">
<!--
//示例： 将子窗口中的文本框中的数据传递到父窗口中的文本框中显示
function fun(){
//1.拿到文本框中填写的数据
var v = document.getElementById("txt").value ;
//2.拿到父窗口对象
var w = window.opener ;
//3.拿到父窗口中的文本框对象
var txt = w.document.getElementById("txt") ;
//4.将内容赋值给父窗口中的文本框对象的value属性
txt.value = v ;
}
//-->
</script>
<body>
<input type="text" name="" id = "txt">
<input type="button" value="传递子窗口的值到父窗口中的文本框" οnclick="fun()">
</body>
</html>父窗口：
<body>
<input type="text" id = "txt">
<input type="button" value = "打开sub2.html页面" οnclick="">
<iframe src = "sub2.html"></iframe>
</body> <!--将子窗口中的文本框中的数据传递到父窗口中的文本框中显示 -->
<script type="text/javascript">
function fun() {
//拿到子窗口中的数据
var v = document.getElementById("txt").value;
//拿到父窗口
var w = window.parent;
//拿到父窗口文本框对象
var txt = w.document.getElementById("txt");
//把内容赋值给父窗口的文本框对象的value属性
txt.value = v;
}
</script>
<body>
<input type="text" id = "txt">
<input type = "button" value="传递数据到父窗口中" οnclick="fun()">
</body> <script type="text/javascript">
function fun() {
//拿到文本框中的数据：
var v = document.getElementById("txt").value;
//拿到子窗口对象；
var w = window.frames[0];
//拿到子窗口文本框对象
var txt = w.document.getElementById("txt");
//将内容赋值给父窗口的文本框对象的value属性
txt.value = v;
}
</script>
<body>
<input type="text" id = "txt">
<input type="button" value = "打开sub2.html页面" οnclick="fun()">
<iframe src = "sub2.html"></iframe>
</body>
</html>
status属性：
<title>状态栏显示当前时间</title>
</head>
<script type="text/javascript">
<!--
function init(){
//拿到当前时间
var d = new Date() ;
//设置状态栏的文本
self.status = d.toLocaleString() ;
setTimeout("init()",1000) ;
}
//-->
</script>
<body onload = "init()">
</body>
</html>对话框：
1)消息框 alert() ;
2)确认框 confirm() ;
3)输入框 prompt() ; (了解)
<title>window对象的三种对话框</title>
</head>
<body>
<script type="text/javascript">
<!--
/*
三种对话框：1. 消息框：alert() ;
2. 确认框: confirm() :返回Boolean类型的值
3. 输入框: prompt(): 返回输入的字符串(了解)
*/
//window.alert("你好") ;
/*while(true){
if(confirm("你爱我吗？") == false)
continue ;
break ;
}*/
var a = prompt("请输入年龄：",12) ;
alert(a) ;
//-->
</script>
</body>
<title>window对象的close方法</title>
</head>
<body>
<script type="text/javascript">
<!--
window.close() ;
//-->
</script>
</body>
</html>定时器：
setTimeout ,setInterval定时器： 1.setTimeout() :只会调用1次
2.setInterval() ：每隔一段时间调用1次
<title>window对象的计时器</title>
</head>
<script type="text/javascript">
<!--
/*
window对象的计时器：1.setTimeout(): 隔一段时间调用某个函数(只调用一次),返回的是一个计时器(理解成一个手表)
clearTimeout() ：销毁由setTimeout()产生的计时器
2.setInterval(): 每隔一段时间调用某个函数(多次调用)
clearInterval(): 销毁由setInterval()产生的计时器
*/
var t ;
var t1 ;
function fun(){
//拿到p标签的主体内容
var p= document.getElementById("p") ;
var v = p.innerHTML ; //不能使用value，value是表单标签的属性
//将主体内类转换为number,转换后赋值回去
p.innerHTML = v*1-1 ;
t = setTimeout("fun()",1000) ;
}
function fun1(){
//拿到p标签的主体内容
var p= document.getElementById("p") ;
var v = p.innerHTML ;
//将主体内类转换为number,转换后赋值回去
p.innerHTML = v*1-1 ;
}
function fun2(){
clearTimeout(t) ;
}
t1 = setInterval("fun1()",1000);
function fun3(){
clearInterval(t1) ;
}
function fun4(){
t1 = setInterval("fun1()",1000);
}
//-->
</script>
<body>
<p id = "p">10</p><br>
<input type="button" value="演示setTimeout方法" οnclick="fun()">
<input type="button" value="演示clearTimeout方法" οnclick="fun2()">
<input type="button" value="演示setInterval方法" οnclick="fun4()">
<input type="button" value="演示clearInterval方法" οnclick="fun3()">
</body>
</html>
<title>window的模态窗体</title>
</head>
<body>
<script type="text/javascript">
<!--
/*
模态窗体:
*/
// window.showModalDialog("你好") ;
window.showModelessDialog("你好");
//-->
</script>
</body>
</html>
143
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
