window对象

moveTo移动到指定位置。

（1）moveTo() moveBy()

案例：

window.moveTo(100,100);//这个是相对屏幕的左上角移动

window.moveBy(100,100);//当前这个窗口的左上角（窗口的移动位置参照是原先窗口的左上角）。

（2）resizeTo() resizeBy()

resizeTo(100,100);//把窗口调整到100,100

resizeBy(100,100);//把窗口再增加100,100.

（3）开辟一个新窗口。

window.open(url,name,featrues,replace)

window.open("newWindow.html","_self");//替换原窗口

window.open("newWindow.html","_black");//在新窗口打开

window.open("newWindow.html","_blank","channelmode=yes,resizable=no,location=no");

window.open("newWindow.html","_blank","width=200,height=100,location=no");

这段代码打开一个新窗口，在IE中打开是固定大小，在谷歌浏览器中打开时窗口大小可以进行调整。

（8）opener

父窗口和子窗口通信

opener。

子窗口改变父窗口的值。

父窗口

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<script language="javascript" type="text/javascript">
var newWindow;
function test2(){
//newWindow其实就是指向新窗口的引用
newWindow=window.open("newWindow.html","_blank","width=1000,height=800");
}

function test3(){
newWindow.document.getElementById("info").value=$("info2").value;
}
function $(id){
return document.getElementById(id);
}

</script>
</head>
<body>
我是一个窗口
<input type="button" value="打开新窗口" onclick="test2()"/>
<span id="myspan">消息</span>
<input type="text" id="info2"/>
<input type="button" value="通知子窗口" onclick="test3()"/>
</body>
</html>

子窗口

<!DOCTYPE html>
<html>
<head>
<meta content="charset=utf-8">
<title>Document</title>
<script language="javascript" type="text/javascript">
function notify(){
var val=document.getElementById("info").value;
window.alert(val);
opener.document.getElementById("myspan").innerText=val;
}
</script>

</head>
<body>
<span>new Window</span>
<input type="text" id="info"/>
<input type="button" value="通知父窗口" onclick="notify()"/>
</body>
</html>

上述两端代码在IE浏览器中运行是没有问题的，但是在谷歌浏览器中却是会出bug.

利用opener可以对父窗口进行刷新（比如在子窗口编辑，然后自动在父窗口刷新）。

用户登录成功后（数秒）跳转到另外一个页面。

案例：

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <script language="javascript" type="text/javascript">
    function checkuser(){
        if($("uname")=="shunping"&&$("pwd"=="123"){
            //window.alert("ok");
            return true;
        }else{
            //window.alert("no ok");
            return false;
        }
    }
    function $(id){
        //return document.getElementById(id).value;
        //之前使用了下面这句话是错的，后来莫名其妙就对了，但是上面这句话肯定是没有错的
        return document.getElementById(id);
    }
    </script>

</head> 
<body>
    <form action="ok.html">
        username:<input type="text" id="uname"/><br/>
    password:<input type="password" id="pwd"/><br/>
    <input type="submit" value="登录" onclick="return checkuser()" />
    </form>
</body>
</html>

在input中输入密码后，对账号密码进行验证，如果成功的话就跳转到欢迎界面。

ok.html

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <script language="javascript" type="text/javascript">
        function tiao(){
            clearInterval(mytime);
            window.open("manage.html","_self");
        }
        setTimeout("tiao()",5000);
        function changeSec(){
            $("myspan").innerText=parseInt($("myspan").innerText)-1;
        }
        var mytime=setInterval("changeSec()",1000);
        function $(id){
            return document.getElementById(id);
        }
    </script>

</head>
<body>
    <h1>恭喜登录成功</h1>
    登录<span id="myspan">5</span>秒后自动跳转到管理页面
</body>
</html>

在ok.html中，显示登录5后进行跳转，5秒后跳转是用setTimeout("tiao()",5000)实现的，而5秒渐变是用setInterval("changeSec()",1000)来实现的。