dom對象詳解----window對象2
- moveTo() 和 moveBy()方法
moveTo() 方法可把窗口的左上角移動到一個指定的座標。
moveBy() 方法可相對窗口的當前座標把它移動指定的像素。
<html>
<head>
<script type="text/javascript">
function moveWin()
{
window.moveTo(400,400);
}
window.moveTo(400,400);
window.moveBy(400,400);
</script>
</head>
<body>
<input type="button" value="移動" onclick="moveWin()" />
</body>
</html>- resizeTo() 和 resizeBy() 方法
window.resizeTo(400,400); //把窗口大小調整到400,400
window.resizeBy(400,400); //把窗口在原來的基礎上再增加400,400
<html>
<head>
<script type="text/javascript">
function test()
{
window.resizeTo(400,400);
window.resizeBy(400,400);
}
</script>
</head>
<body>
<input type="button" value="改變大小" onclick="test()" />
</body>
</html>- open() 和 close()
- opener
opener 屬性是一個可讀可寫的屬性，可返回對創建該窗口的 Window 對象的引用。
opener 屬性非常有用，創建的窗口可以引用創建它的窗口所定義的屬性和函數。
註釋：只有表示頂層窗口的 Window 對象的 operner 屬性纔有效，表示框架的 Window 對象的 operner 屬性無效。
注意：在IE瀏覽器中可以使用innerText，但是在火狐瀏覽器中不能使用，需使用textContent
父窗口和子窗口通信
父窗口程序：
<html>
<head>
<script type="text/javascript">
var newWin;
function test()
{
//newWin其實就是指向新窗口的引用
newWin = window.open("NewWin.html","_blank");
}
function notifyChild(){
var val=document.getElementById("Father_info").value;
newWin.document.getElementById("span2").innerText=val;// IE 瀏覽器
newWin.document.getElementById("span2").textContent=val; // 火狐瀏覽器
}
</script>
</head>
<body>
我是父窗口<br/>
<input type="button" value="打開子窗口" onclick="test()" /><br/>
<span id="myspan">父窗口消息</span><br/>
<input type="text" id="Father_info"/><br/>
<input type="button" value="在子窗口顯示" onclick="notifyChild()"/><br/>
</body>
</html>
子窗口程序：
<html>
<head>
<script language="javascript">
function notify(){
var val=document.getElementById("Child_info").value;
opener.document.getElementById("myspan").innerText=val;
}
</script>
</head>
<body>
我是子窗口<br/>
<input type="text" id="Child_info"/><br/>
<input type="button" value="在父窗口顯示" onclick="notify()"/><br/>
<span id="span2">子窗口信息</span>
</body>
</html>
再來看1個案例：
login.html
<html>
<head>
<script type="text/javascript">
function checkuser(){
if($('uname').value=="shunping" && $('pwd').value=="123"){
//window.alert("ok");
return true;
}else {
//window.alert("no ok");
$('uname').value="";
$('pwd').value="";
return false;
}
}
function $(id){
return document.getElementById(id);
}
</script>
</head>
<body>
<form action="OK.html">
用戶名：<input type="text" id="uname"/><br/>
密碼：<input type="password" id="pwd"/><br/>
<input type="submit" value="登錄" onclick="return checkuser()">
</body>
</html>
OK.html
<html>
<head>
<script type="text/javascript">
function tiao(){
clearInterval(mytime);
window.open('manage.html');
}
setTimeout("tiao()",5000);
function changeSec(){
$("myspan").innerText=$("myspan").innerText-1;
}
var mytime=setInterval("changeSec()",1000);
function $(id){
return document.getElementById(id);
}
</script>
</head>
<body>
登錄成功<br/>
<span id="myspan">5</span>
秒後跳轉到管理頁面
</body>
</html>
manage.html
<html>
<head>
<script type="text/javascript">
</script>
</head>
<body>
管理頁面
</body>
</html>