JavaScript里面的Dom编程里面的window对象有很多的方法能实现很多特殊的效果,下面我们来列举一些方法,然
后做出一个小案例,就是使用Window对象的opener方法实现父子两方的窗口的对话!
首先是父 窗口的代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test4.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function test(){//moveto是按照当前屏幕定位窗口,moveby是根据当前窗口左上角位置再次定位
window.moveTo(100, 100);
}
function test2(){//重新改变大小
window.resizeTo(400, 500);
}
function test3(){//在原来窗口大小的基础上增加一定的程度和宽度
window.resizeBy(100, 200);
}
function test4(){//_black是打开新的窗口,不替换原来的窗口
//newWin其实是打开的新窗口的句柄
var newWin = window.open("test5.html", "_blank");
newWin.document.getElementById("info").innerText="哈哈";
}
</script>
</head>
<body>
This is my HTML page. <br>
<input type="button" οnclick="test();" value="移动"/><br/>
<input type="button" οnclick="test2();" value="改变大小"/><br/>
<input type="button" οnclick="test3();" value="增加大小"/><br/>
<input type="button" οnclick="test4();" value="打开新窗口"/><br/>
<span id="myspan"></span>
</body>
</html>
然后是子窗口的代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test5.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function notify(){//获取当前输入内容信息,传递给父窗口
var val = document.getElementById("info").value;
window.opener.document.getElementById("myspan").innerText=val;
}
</script>
</head>
<body>
我是新窗口
<input type="text" id="info"/><br/>
<input type="button" value="通知给父窗口" οnclick="notify();"/>
</body>
</html>
这样两个窗口之间就能进行互相的通信了,其实关键代码就是那一句
function notify(){//获取当前输入内容信息,传递给父窗口
var val = document.getElementById("info").value;
window.opener.document.getElementById("myspan").innerText=val;
}