JavaScript操作浏览器窗口

 窗口是Web浏览器中最重要的界面元素，JavaScript提供了许多操作窗口的工具，JavaScript处理窗口的方式与处理框架很相似（因为框架是位于总浏览器窗口中的文档窗口）。
      今天学习了如何使用JavaScript打开关闭，更新和定位窗口，如何使用JavaScript将信息写入窗口，从而可以在运行时构建网页。
      (一)打开新窗口
[html]
 
   
     
     
   
   
   
    

The Master of the House

 
    

Click on his name to behold he who must be adored

 
    

   
 

(二)打开多个窗口
[html]
 
 
     
       
 
 
   

More pictures of our cat

 
   

 
 

(三)关闭窗口
[html]
 
 
     
       
 
 
   

 
       

Let's play with windows!

 
       

 
                               

 
   

 
 
 

(四)把窗口放在指定位置
[html]
 
 
     
       
 
 
   

 
       

Let's play with windows!

 
       

 
                                                                   

 
   

 
 
 

以上四种操作所需的js脚本分别为以下scripti：
[javascript]
/**
 * 打开新窗口(script1.js)
 */ 
window.onload=newWinLinks; 
 
function newWinLinks(){ 
    for(var i=0;i if(document.links[i].className=="newWin"){
document.links[i].onclick=newWindow;
}
}
}

function newWindow(){
var catWindow=window.open("images/pixel1.jpg", "catWin", "resizable=no,width=350,height=260");
//注意在宽度和高度参数中的逗号之间不能有任何空格，如果有空格，那么脚本
//可能在某些浏览器中无效，
return false;
}
[javascript]

/**
 *打开多个窗口(script2.js) 在每次点击屏幕上的一个控件时，通过创建的脚本代开不同的窗口
 */ 
window.onload=newWinLinks; 
 
function newWinLinks(){ 
    for(var i=0;i        if(document.links[i].className="newWin"){ 
            document.links[i].onclick=newWindows; 
        } 
    } 
} 
 
function newWindows(){ 
    for(var i=1;i<5;i++){ 
        var imgName="images/pixel"+i+".jpg"; 
        var winName="window"+i; 
        var catWindow=window.open(imgName, winName,"width=350,height=260"); 
    } 
} 
 
[javascript]
/**
 * 关闭窗口(script3.js)
 */ 
var newWindow=null; 
window.onload=newWinLinks; 
 
function newWinLinks(){ 
    for(var i=0;i        document.links[i].onclick=chgWindowState; 
    } 
} 
 
function windowOpen(){ 
    if(newWindow&&!newWindow.closed){ 
        return true; 
    } 
    return false; 
} 
 
function chgWindowState(){ 
    if(this.id=="closeWin"){ 
        if(windowOpen()){ 
            newWindow.close(); 
        }else{ 
            alert("The window isn't open"); 
        } 
    } 
    if(this.id=="openWin"){ 
        if(windowOpen()){ 
            alert("The window is already open!"); 
        }else{ 
            newWindow=window.open("", "newWin","toolbar,location=yes,width=300,height=200"); 
        } 
    } 
    return false; 
} 
[javascript]
/**
 * 把窗口放在指定的位置(script4.js)有时候希望在屏幕上的指定位置打开一个窗口，在这个示例中，用户可以选择在屏幕的四个角之一打开一个小窗口。
 */ 
var newWindow=null; 
window.onload=newWinLinks; 
 
function newWinLinks(){ 
    for(var i=0;i        document.links[i].onclick=chgWindowState; 
    } 
} 
 
function windowOpen(){ 
    if(newWindow&&!newWindow.closed){ 
        return true; 
    } 
    return false; 
} 
 
function chgWindowState(){ 
    if(this.id=="closeWin"){ 
        if(windowOpen()){ 
            newWindow.close(); 
        }else{ 
            alert("The window isn't open"); 
        } 
        return false; 
    } 
    var topPos=0; 
    var leftPos=0; 
     
    if(this.id.indexOf("bottom")>-1){ 
        topPos=screen.availHeight-200; 
    } 
    if(this.id.indexOf("Right")>-1){ 
        leftPos=screen.availWidth-300; 
    } 
    if(windowOpen()){ 
        newWindow.moveTo(leftPos,topPos); 
    }else{ 
        newWindow=window.open("","newWin","toolbar,location=yes,width=300,height=200,left="+leftPos+",top="+topPos); 
    } 
    return false; 
} 
 
opener和parent比较：
window.opener其实是指本窗口的父窗口，比如，parWin.js通过window.open弹出了childWin.jsp,那么在childWin.js里面的window.opener就是指parWin.jsp，所以在childWin.js里面完全可以用window.opener调用任何一个parWin.jsp里面的方法，实现parWin.jsp和childWin.jsp的交互。
window.parent 是iframe页面调用父页面对象，比如一个parWin页面利用iframe或frame调用childWin页面，那么parWin页面所在窗口就是childWin页面的parent。