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可以对父窗口进行刷新(比如在子窗口编辑,然后自动在父窗口刷新)。
用户登录成功后(数秒)跳转到另外一个页面。
案例:
login.html
<!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)来实现的。