窗口是Web瀏覽器中最重要的界面元素，JavaScript提供瞭許多操作窗口的工具，JavaScript處理窗口的方式與處理框架很相似（因為框架是位於總瀏覽器窗口中的文檔窗口）。
今天學習瞭如何使用JavaScript打開關閉，更新和定位窗口，如何使用JavaScript將信息寫入窗口，從而可以在運行時構建網頁。
(一)打開新窗口
[html]
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Open a Window</title>
<script type="text/javascript" src="script01.js"></script>
</head>
<body bgcolor="#FFFFFF">
<h1>The Master of the House</h1>
<h2>Click on his name to behold he who must be adored</h2>
<h2><a href="#" class="newWin">Tired</a></h2>
</body>
</html>
(二)打開多個窗口
[html]
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>About that Cat</title>
<script type="text/javascript" src="script02.js"></script>
</head>
<body bgcolor="#FFFFFF">
<h1>More pictures of our cat</h1>
<h2><a href="#" class="newWin">Click here to see him</a></h2>
</body>
</html>
(三)關閉窗口
[html]
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Window Test</title>
<script type="text/javascript" src="script03.js"></script>
</head>
<body bgcolor="#FFFFFF">
<p align="center">
<h1>Let's play with windows!</h1>
<h3>
<a href="#" id="openWin">Open a new window</a>
<a href="#" id="closeWin">Close the window</a>
</h3>
</p>
</body>
</html>
(四)把窗口放在指定位置
[html]
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Window Test</title>
<script type="text/javascript" src="script06.js"></script>
</head>
<body bgcolor="#FFFFFF">
<p align="center">
<h1>Let's play with windows!</h1>
<h3>
<a href="#" id="topLeftWin">Move/open window in the top left</a>
<a href="#" id="topRightWin">Move/open window in the top right</a><br />
<a href="#" id="bottomLeftWin">Move/open window in the bottom left</a>
<a href="#" id="bottomRightWin">Move/open window in the bottom right</a><br />
<a href="#" id="closeWin">Close the window</a>
</h3>
</p>
</body>
</html>
以上四種操作所需的js腳本分別為以下scripti：
[javascript]
/**
* 打開新窗口(script1.js)
*/
window.onload=newWinLinks;
function newWinLinks(){
for(var i=0;i<document.links.length;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]
<pre class="javascript" name="code">/**
*打開多個窗口(script2.js) 在每次點擊屏幕上的一個控件時，通過創建的腳本代開不同的窗口
*/
window.onload=newWinLinks;
function newWinLinks(){
for(var i=0;i<document.links.length;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.length;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<documeng.links.length;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。
（源《JavaScript基礎教程》）
摘自 Yanghai
