您的位置：首页 > 其它

浏览器对象模型BOM之window对象

2016-11-27 13:56 387 查看

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.超链（里面的target属性要设置成_blank）
2种情况下使用parent:

1.iframe 框架

2.frame 框架
frames[]: 数组类型，代表子窗口的window对象的集合,可以通过frames[索引]拿到子窗口的window对象。
示例：父子窗口相互传参.

open方法，是打开一个页面.

</head>
<script type="text/javascript">

</script>
<body onload = "init()">
<p>你好</p>
</body>
</html>

将子窗口中的文本框中的数据传递到父窗口中的文本框中显示

父窗口：

</head>
<script type="text/javascript">

</script>
<body>
<input type="text" name="" id = "txt">
<input type="button" value="打开sub.html页面" onclick="fun()">

<a href = "sub.html" target = "_blank">打开sub.html页面</a>
</body>
</html>sub.html:
</head>
<script type="text/javascript">

</script>
<body>
<input type="text" name="" id = "txt">
<input type="button" value="传递子窗口的值到父窗口中的文本框" onclick="fun()">
</body>
</html>

父窗口：
<body>
<input type="text" id = "txt">
<input type="button" value = "打开sub2.html页面" onclick="">
<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="传递数据到父窗口中" onclick="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页面" onclick="fun()">
<iframe src = "sub2.html"></iframe>
</body>
</html>

status属性：
<title>状态栏显示当前时间</title>
</head>
<script type="text/javascript">

</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">

</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方法" onclick="fun()">
<input type="button" value="演示clearTimeout方法" onclick="fun2()">
<input type="button" value="演示setInterval方法" onclick="fun4()">
<input type="button" value="演示clearInterval方法" onclick="fun3()">

</body>
</html>

<title>window的模态窗体</title>
</head>
<body>
<script type="text/javascript">
<!--
/*
模态窗体:
*/

//  window.showModalDialog("你好") ;
window.showModelessDialog("你好");
//-->
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航