【1、普通的彈出窗口】
其實代碼非常簡單：
<SCRIPT LANGUAGE=javascript>
<!--
window.open ('page.html')
-->
</SCRIPT>
因爲這是一段javascripts代碼，所以它們應該放在<SCRIPT LANGUAGE=javascript>標籤和</script>之間。<!-- 和 -->是對一些版本低的瀏覽器起作用，在這些老瀏覽器中不會將標籤中的代碼作爲文本顯示出來。要養成這個好習慣啊。
window.open ('page.html') 用於控制彈出新的窗口page.html，如果page.html不與主窗口在同一路徑下，前面應寫明路徑，絕對路徑(http://)和相對路徑(../)均可。
用單引號和雙引號都可以，只是不要混用。
這一段代碼可以加入HTML的任意位置，<head>和</head>之間可以，<body>間</body>也可以，越前越早執行，尤其是頁面代碼長，又想使頁面早點彈出就儘量往前放。
【2、經過設置後的彈出窗口】
下面再說一說彈出窗口的設置。只要再往上面的代碼中加一點東西就可以了。我們來定製這個彈出的窗口的外觀，尺寸大小，彈出的位置以適應該頁面的具體情況。
<SCRIPT LANGUAGE=javascript>
<!--
window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no')
//寫成一行
-->
</SCRIPT>
參數解釋：
<SCRIPT LANGUAGE=javascript> js腳本開始；
window.open 彈出新窗口的命令；
'page.html' 彈出窗口的文件名；
'newwindow' 彈出窗口的名字（不是文件名），非必須，可用空''代替；
height=100 窗口高度；
width=400 窗口寬度；
top=0 窗口距離屏幕上方的象素值；
left=0 窗口距離屏幕左側的象素值；
toolbar=no 是否顯示工具欄，yes爲顯示；
menubar，scrollbars 表示菜單欄和滾動欄。
resizable=no 是否允許改變窗口大小，yes爲允許；
location=no 是否顯示地址欄，yes爲允許；
status=no 是否顯示狀態欄內的信息（通常是文件已經打開），yes爲允許；
</SCRIPT> js腳本結束
【3、用函數控制彈出窗口】
下面是一個完整的代碼。
<html>
<head>
<script LANGUAGE=javascript>
<!--
function openwin() {
window.open (page.html, newwindow, height=100, width=400, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no)
//寫成一行
}
//-->
</script>
</head>
<body onload=openwin()>
..任意的頁面內容...
</body>
</html>
這裏定義了一個函數openwin(),函數內容就是打開一個窗口。在調用它之前沒有任何用途。
怎麼調用呢？
方法一：<body onload=openwin()> 瀏覽器讀頁面時彈出窗口；
方法二：<body onunload=openwin()> 瀏覽器離開頁面時彈出窗口；
方法三：用一個連接調用：
<a href=注意：使用的“ 方法四：用一個按鈕調用：
<input type=button onclick=openwin() value=打開窗口>
【4、同時彈出2個窗口】
對源代碼稍微改動一下：
<script LANGUAGE=javascript>
<!--
function openwin() {
window.open (page.html, newwindow, height=100, width=100, top=0, left=0,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no)
//寫成一行
window.open (page2.html, newwindow2, height=100, width=100, top=100, left=100,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no)
//寫成一行
}
//-->
</script>
爲避免彈出的2個窗口覆蓋，用top和left控制一下彈出的位置不要相互覆蓋即可。最後用上面說過的四種方法調用即可。
注意：2個窗口的name(newwindows和newwindow2)不要相同，或者乾脆全部爲空。OK？
【5、主窗口打開文件1.htm，同時彈出小窗口page.html】
如下代碼加入主窗口<head>區：
<script language=javascript>
<!--
function openwin() {
window.open(page.html,,width=200,height=200)
}
//-->
</script>
加入<body>區：
<a href=1.htm onclick=openwin()>open</a>即可。
【6、彈出的窗口之定時關閉控制】
下面我們再對彈出的窗口進行一些控制，效果就更好了。如果我們再將一小段代碼加入彈出的頁面(注意是加入到page.html的HTML中，可不是主頁面中，否則...)，讓它10秒後自動關閉是不是更酷了？
首先，將如下代碼加入page.html文件的<head>區：
<script language=javascript>
function closeit() {
setTimeout(self.close(),10000) //毫秒
}
</script>
然後，再用<body onload=closeit()> 這一句話代替page.html中原有的<BODY>這一句就可以了。(這一句話千萬不要忘記寫啊！這一句的作用是調用關閉窗口的代碼，10秒鐘後就自行關閉該窗口。)
【8、內包含的彈出窗口-一個頁面兩個窗口】
上面的例子都包含兩個窗口，一個是主窗口，另一個是彈出的小窗口。
通過下面的例子，你可以在一個頁面內完成上面的效果。
<html>
<head>
<SCRIPT LANGUAGE=javascript>
function openwin()
{
OpenWindow=window.open(, newwin, height=250, width=250,toolbar=no,scrollbars=+scroll+,menubar=no);
//寫成一行
OpenWindow.document.write(<TITLE>例子</TITLE>)
OpenWindow.document.write(<BODY BGCOLOR=OpenWindow.document.write(<h1>Hello!</h1>)
OpenWindow.document.write(New window opened!)
OpenWindow.document.write(</BODY>)
OpenWindow.document.write(</HTML>)
OpenWindow.document.close()
}
</SCRIPT>
</head>
<body>
<a href=<input type=button onclick=openwin() value=打開窗口>
</body>
</html>
看看 OpenWindow.document.write()裏面的代碼不就是標準的HTML嗎？只要按照格式寫更多的行即可。千萬注意多一個標籤或少一個標籤就會出現錯誤。記得用OpenWindow.document.close()結束啊。
【7、在彈出窗口中加上一個關閉按鈕】
<FORM>
<INPUT TYPE='BUTTON' value='關閉' onClick='window.close()'>
</FORM>
呵呵，現在更加完美了！
【9、終極應用--彈出的窗口之Cookie控制】
回想一下，上面的彈出窗口雖然酷，但是有一點小毛病(沉浸在喜悅之中，一定沒有發現吧？)比如你將上面的腳本放在一個需要頻繁經過的頁面裏(例如首頁)，那麼每次刷新這個頁面，窗口都會彈出一次，是不是非常煩人？:-(
有解決的辦法嗎？Yes! ;-) Follow me.
我們使用cookie來控制一下就可以了。
首先，將如下代碼加入主頁面HTML的<HEAD>區：
<script>
function openwin(){
window.open(page.html,,width=200,height=200)
}
function get_cookie(Name) {
var search = Name + =
var returnvalue = ;
if (documents.cookie.length > 0) {
offset = documents.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = documents.cookie.indexOf(;, offset);
if (end == -1)
end = documents.cookie.length;
returnvalue=unescape(documents.cookie.substring(offset, end))
}
}
return returnvalue;
}
function loadpopup(){
if (get_cookie('popped')==''){
openwin()
documents.cookie=popped=yes
}
}
</script>
然後，用<body onload=loadpopup()>（注意不是openwin而是loadpop啊！）替換主頁面中原有的<BODY>這一句即可。你可以試着刷新一下這個頁面或重新進入該頁面，窗口再也不會彈出了。
其實代碼非常簡單：
<SCRIPT LANGUAGE=javascript>
<!--
window.open ('page.html')
-->
</SCRIPT>
因爲這是一段javascripts代碼，所以它們應該放在<SCRIPT LANGUAGE=javascript>標籤和</script>之間。<!-- 和 -->是對一些版本低的瀏覽器起作用，在這些老瀏覽器中不會將標籤中的代碼作爲文本顯示出來。要養成這個好習慣啊。
window.open ('page.html') 用於控制彈出新的窗口page.html，如果page.html不與主窗口在同一路徑下，前面應寫明路徑，絕對路徑(http://)和相對路徑(../)均可。
用單引號和雙引號都可以，只是不要混用。
這一段代碼可以加入HTML的任意位置，<head>和</head>之間可以，<body>間</body>也可以，越前越早執行，尤其是頁面代碼長，又想使頁面早點彈出就儘量往前放。
【2、經過設置後的彈出窗口】
下面再說一說彈出窗口的設置。只要再往上面的代碼中加一點東西就可以了。我們來定製這個彈出的窗口的外觀，尺寸大小，彈出的位置以適應該頁面的具體情況。
<SCRIPT LANGUAGE=javascript>
<!--
window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no')
//寫成一行
-->
</SCRIPT>
參數解釋：
<SCRIPT LANGUAGE=javascript> js腳本開始；
window.open 彈出新窗口的命令；
'page.html' 彈出窗口的文件名；
'newwindow' 彈出窗口的名字（不是文件名），非必須，可用空''代替；
height=100 窗口高度；
width=400 窗口寬度；
top=0 窗口距離屏幕上方的象素值；
left=0 窗口距離屏幕左側的象素值；
toolbar=no 是否顯示工具欄，yes爲顯示；
menubar，scrollbars 表示菜單欄和滾動欄。
resizable=no 是否允許改變窗口大小，yes爲允許；
location=no 是否顯示地址欄，yes爲允許；
status=no 是否顯示狀態欄內的信息（通常是文件已經打開），yes爲允許；
</SCRIPT> js腳本結束
【3、用函數控制彈出窗口】
下面是一個完整的代碼。
<html>
<head>
<script LANGUAGE=javascript>
<!--
function openwin() {
window.open (page.html, newwindow, height=100, width=400, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no)
//寫成一行
}
//-->
</script>
</head>
<body onload=openwin()>
..任意的頁面內容...
</body>
</html>
這裏定義了一個函數openwin(),函數內容就是打開一個窗口。在調用它之前沒有任何用途。
怎麼調用呢？
方法一：<body onload=openwin()> 瀏覽器讀頁面時彈出窗口；
方法二：<body onunload=openwin()> 瀏覽器離開頁面時彈出窗口；
方法三：用一個連接調用：
<a href=注意：使用的“ 方法四：用一個按鈕調用：
<input type=button onclick=openwin() value=打開窗口>
【4、同時彈出2個窗口】
對源代碼稍微改動一下：
<script LANGUAGE=javascript>
<!--
function openwin() {
window.open (page.html, newwindow, height=100, width=100, top=0, left=0,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no)
//寫成一行
window.open (page2.html, newwindow2, height=100, width=100, top=100, left=100,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no)
//寫成一行
}
//-->
</script>
爲避免彈出的2個窗口覆蓋，用top和left控制一下彈出的位置不要相互覆蓋即可。最後用上面說過的四種方法調用即可。
注意：2個窗口的name(newwindows和newwindow2)不要相同，或者乾脆全部爲空。OK？
【5、主窗口打開文件1.htm，同時彈出小窗口page.html】
如下代碼加入主窗口<head>區：
<script language=javascript>
<!--
function openwin() {
window.open(page.html,,width=200,height=200)
}
//-->
</script>
加入<body>區：
<a href=1.htm onclick=openwin()>open</a>即可。
【6、彈出的窗口之定時關閉控制】
下面我們再對彈出的窗口進行一些控制，效果就更好了。如果我們再將一小段代碼加入彈出的頁面(注意是加入到page.html的HTML中，可不是主頁面中，否則...)，讓它10秒後自動關閉是不是更酷了？
首先，將如下代碼加入page.html文件的<head>區：
<script language=javascript>
function closeit() {
setTimeout(self.close(),10000) //毫秒
}
</script>
然後，再用<body onload=closeit()> 這一句話代替page.html中原有的<BODY>這一句就可以了。(這一句話千萬不要忘記寫啊！這一句的作用是調用關閉窗口的代碼，10秒鐘後就自行關閉該窗口。)
【8、內包含的彈出窗口-一個頁面兩個窗口】
上面的例子都包含兩個窗口，一個是主窗口，另一個是彈出的小窗口。
通過下面的例子，你可以在一個頁面內完成上面的效果。
<html>
<head>
<SCRIPT LANGUAGE=javascript>
function openwin()
{
OpenWindow=window.open(, newwin, height=250, width=250,toolbar=no,scrollbars=+scroll+,menubar=no);
//寫成一行
OpenWindow.document.write(<TITLE>例子</TITLE>)
OpenWindow.document.write(<BODY BGCOLOR=OpenWindow.document.write(<h1>Hello!</h1>)
OpenWindow.document.write(New window opened!)
OpenWindow.document.write(</BODY>)
OpenWindow.document.write(</HTML>)
OpenWindow.document.close()
}
</SCRIPT>
</head>
<body>
<a href=<input type=button onclick=openwin() value=打開窗口>
</body>
</html>
看看 OpenWindow.document.write()裏面的代碼不就是標準的HTML嗎？只要按照格式寫更多的行即可。千萬注意多一個標籤或少一個標籤就會出現錯誤。記得用OpenWindow.document.close()結束啊。
【7、在彈出窗口中加上一個關閉按鈕】
<FORM>
<INPUT TYPE='BUTTON' value='關閉' onClick='window.close()'>
</FORM>
呵呵，現在更加完美了！
【9、終極應用--彈出的窗口之Cookie控制】
回想一下，上面的彈出窗口雖然酷，但是有一點小毛病(沉浸在喜悅之中，一定沒有發現吧？)比如你將上面的腳本放在一個需要頻繁經過的頁面裏(例如首頁)，那麼每次刷新這個頁面，窗口都會彈出一次，是不是非常煩人？:-(
有解決的辦法嗎？Yes! ;-) Follow me.
我們使用cookie來控制一下就可以了。
首先，將如下代碼加入主頁面HTML的<HEAD>區：
<script>
function openwin(){
window.open(page.html,,width=200,height=200)
}
function get_cookie(Name) {
var search = Name + =
var returnvalue = ;
if (documents.cookie.length > 0) {
offset = documents.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = documents.cookie.indexOf(;, offset);
if (end == -1)
end = documents.cookie.length;
returnvalue=unescape(documents.cookie.substring(offset, end))
}
}
return returnvalue;
}
function loadpopup(){
if (get_cookie('popped')==''){
openwin()
documents.cookie=popped=yes
}
}
</script>
然後，用<body onload=loadpopup()>（注意不是openwin而是loadpop啊！）替換主頁面中原有的<BODY>這一句即可。你可以試着刷新一下這個頁面或重新進入該頁面，窗口再也不會彈出了。
一、 基本變化
<SCRIPT LANGUAGE="javascript">
<!--
window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no,resizable=no,location=no, status=no')
//寫成一行
-->
</SCRIPT>
參數解釋：
window.open 彈出新窗口的命令；
'page.html' 彈出窗口的文件名；
'newwindow' 彈出窗口的名字（不是文件名），非必須，可用空''代替；
100 窗口高度；
width=400 窗口寬度；
top=0 窗口距離屏幕上方的象素值；
left=0 窗口距離屏幕左側的象素值；
toolbar=no 是否顯示工具欄，yes爲顯示；
menubar，scrollbars 表示菜單欄和滾動欄。
resizable=no 是否允許改變窗口大小，yes爲允許；
location=no 是否顯示地址欄，yes爲允許；
status=no 是否顯示狀態欄內的信息（通常是文件已經打開），yes爲允許；
二、 彈啓一個全屏窗口
加入fullscreen
<SCRIPT LANGUAGE="javascript">
<!--
window.open ('page.html', 'newwindow', 'fullscreen') //全屏了，自然其他條件就都失效了
-->
</SCRIPT>
三、 打開一個和按F11所見到的一樣的窗口
加入channelmode
<SCRIPT LANGUAGE="javascript">
<!--
window.open ('page.html', 'newwindow', channelmode)
-->
</SCRIPT>
四、 打開一個連標題欄都沒有的窗口（無標題、最小、最大、以及關閉按鈕）
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<script language="javascript">
function unload()
{
var popUpSizeX=200; //窗口的寬度
var popUpSizeY=166; //窗口的高度
var popUpLocationX=2;//距離左邊的距離 相當於 left
var popUpLocationY=2;//距離頂端的距離 相當於 top
// URL of the popUp
var popUpURL="http://www.33d9.com/default.asp";; //打開頁面的路徑
// ** 下面的就不要隨便改了 ***
splashWin = window.open("",'x','fullscreen=1, ,scrollbars=auto,resizable=1');
splashWin.blur(); // Hide while updating
window.focus();
splashWin.resizeTo(popUpSizeX,popUpSizeY);
splashWin.moveTo(popUpLocationX,popUpLocationY);
splashWin.location=popUpURL;
}
// END
unload();
</script>
</HEAD>
<BODY></BODY></HTML>
看看，什麼效果？ 如果把resizable 設爲0 scrollbars = no 呢？
五、 沒有最大化按紐的窗口
其實也就是象軟件的“關於我們”的那個窗口一樣，下面就是用對話框窗口來實現它。
showModalDialog()以及showModelessDialog()
1．用showModalDialog()
<html>
<SCRIPT LANGUAGE="javascript">
<!--
showModalDialog('http://www.okajax.com','example04','dialogWidth:400px;dialogHeight:300px;dialogLeft:200px;dialogTop:150px;center:yes;help:yes;resizable:yes;status:yes')
//-->
</SCRIPT>
<b>http://www.okajax.com/</b>
</body>
</html>
2．用showModelessDialog()
<html>
<SCRIPT LANGUAGE="javascript">
<!--
showModelessDialog('http://www.okajax.com','example05','dialogWidth:400px;dialogHeight:300px;dialogLeft:200px;dialogTop:150px;center:yes;help:yes;resizable:yes;status:yes')
//-->
</SCRIPT>
<b>http://www.okajax.com/</b>
</body>
</html>
至於showModalDialog()與showModelessDialog()的區別，在於showModalDialog()打開的窗口（簡稱模式窗口），置在父窗口上，必須關閉才能訪問父窗口(建議儘量少用，以免招人反感)；showModelessDialog()（簡稱無模式窗口），打開後不必關閉也可訪問父窗口打開的窗口。
現在我將這裏的一些參數說明一下。
dialogHeight: iHeight 設置對話框窗口的高度。
dialogWidth: iWidth 設置對話框窗口的寬度。
dialogLeft: iXPos 設置對話框窗口相對於桌面左上角的left位置。
dialogTop: iYPos 設置對話框窗口相對於桌面左上角的top位置。
center: {yes | no | 1 | 0 } 指定是否將對話框在桌面上居中，默認值是“yes”。
help: {yes | no | 1 | 0 } 指定對話框窗口中是否顯示上下文敏感的幫助圖標。默認值是“yes”。
resizable: {yes | no | 1 | 0 } 指定是否對話框窗口大小可變。默認值是“no”。
status: {yes | no | 1 | 0 } 指定對話框窗口是否顯示狀態欄。對於非模式對話框窗口，默認值是“yes”；對於模式對話框窗口，默認值是 “no”。
六、 彈出n 個窗口
這很簡單，只要執行n 次window.open()就行了，當然一定要給每個窗口起不同的名字，
還有，設置一下left和top，避免重疊。
七、 刷新之後就不再彈出窗口
我們使用cookie來控制一下就可以了。
首先，將如下代碼加入主頁面HTML的<HEAD>區：
<script>
function openwin(){
window.open("page.html","","width=200,200")
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (documents.cookie.length > 0) {
offset = documents.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = documents.cookie.indexOf(";", offset);
if (end == -1)
end = documents.cookie.length;
returnvalue=unescape(documents.cookie.substring(offset, end))
}
}
return returnvalue;
}
function loadpopup(){
if (get_cookie('popped')==''){
openwin()
documents.cookie="popped=yes"
}
}
</script>
然後，用<body 替換主頁面中原有的<BODY>這一句即可。你可以試着刷新一下這個頁面或重新進入該頁面，窗口再也不會彈出了。
八、 讓彈出窗口適應裏面圖片的大小
很多時候我們需要提供這樣的功能給訪問者：當訪問者點擊頁面中的縮略圖時，其對應的全尺寸圖片將顯示在一個新的彈出窗口中供訪問者查看。
實現此功能的最簡單作法是用以下HTML代碼創建一個圖像鏈接：
<a href="fullsize.jpg" _fcksavedurl=""fullsize.jpg"" target="_blank"><img src="small.jpg"></a>
其中<a>標記的href屬性指定全尺寸圖片的URL，target屬性設置爲_blank指定在新窗口中顯示該圖片；<img>標記的src屬性指定縮略圖的URL。
如果我們想對顯示全尺寸圖片的窗口的外觀進行某些控制（比如希望彈出窗口的高度、寬度能與全尺寸圖片的大小匹配時），則可調用 window.open 方法，該方法接收三個參數，分別指定要打開文件的URL，窗口名及窗口特性，在窗口特性參數中可指定窗口的高度、寬度，是否顯示菜單欄、工具欄等。以下代碼將顯示全尺寸圖片在一個沒有工具欄、地址欄、狀態欄、菜單欄，寬、高分別爲400、350的窗口中：
<a href="fullsize.jpg" onClick="window.open(this.href,'', 'height=350,width=400,toolbar=no,location=no,status=no,menubar=no');return false"><img src="small.jpg"></a>
這裏就提出了個問題，如果所有全尺寸圖片都具有統一的大小（比如都是400x350），那麼以上代碼適用於所有的縮略圖片鏈接（只是href屬性指向的全尺寸圖片文件不同）。但如果全尺寸圖片的大小並不統一，還用以上代碼則我們需要先取得每幅全尺寸圖片的大小，然後在window.open方法的窗口特性參數中一一設置height和width爲正確的值，在圖片數量較多的情況下，這顯然效率太低了。那麼是否有一勞永逸的方法，即讓彈出窗口能自動適應要顯示圖片的大小？通過研究，發現可以使用 DHTML 中的 Image 對象來達到我們的目的，Image 對象可動態裝載指定的圖片，通過讀取其 width 和 height 屬性即能獲得裝入圖片的大小，以此來設置彈出窗口的大小，即可實現自適應圖片大小的彈出窗口了。下面即是實現代碼:
<script language="javascript" type="text/javascript">
<!--
var imgObj;
function checkImg(theURL,winName){
// 對象是否已創建
if (typeof(imgObj) == "object"){
// 是否已取得了圖像的高度和寬度
if ((imgObj.width != 0) && (imgObj.height != 0))
// 根據取得的圖像高度和寬度設置彈出窗口的高度與寬度，並打開該窗口
// 其中的增量 20 和 30 是設置的窗口邊框與圖片間的間隔量
OpenFullSizeWindow(theURL,winName, ",width=" + (imgObj.width+20) + ",height=" + (imgObj.height+30));
else
// 因爲通過 Image 對象動態裝載圖片，不可能立即得到圖片的寬度和高度，所以每隔100毫秒重複調用檢查
setTimeout("checkImg('" + theURL + "','" + winName + "')", 100)
}
}
function OpenFullSizeWindow(theURL,winName,features) {
var aNewWin, sBaseCmd;
// 彈出窗口外觀參數
sBaseCmd = "toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,";
// 調用是否來自 checkImg
if (features == null || features == ""){
// 創建圖像對象
imgObj = new Image();
// 設置圖像源
imgObj.src = theURL;
// 開始獲取圖像大小
checkImg(theURL, winName)
}
else{
// 打開窗口
aNewWin = window.open(theURL,winName, sBaseCmd + features);
// 聚焦窗口
aNewWin.focus();
}
}
//-->
</script>
使用時將上面的代碼放在網頁文檔的<head></head>標記對中，然後在鏈接的點擊事件中調用OpenFullSizeWindow函數，如<a href="fullsize.jpg" onClick="OpenFullSizeWindow(this.href,'','');return false"><img src="small.jpg"></a>即可。
以上代碼在IE 5.x－6.0中測試通過。
九、 比較靈活的HTA窗口
我簡單介紹一下，HTA的全名爲HTML Application，翻譯過來就是HTML應用程序，你只要簡單的用.hta爲擴展名保存HTML頁面就算創建了一個HTA文件，下面我們就用HTA來編個窗口，將以下這段代碼保存爲.hta文件，然後再用瀏覽器打開，會發現什麼？買個關子，自己去瞧瞧。
<HTML>
<HEAD>
<TITLE>http://www.okajax.com/</TITLE>
<HTA:APPLICATION ID="oHTA"
APPLICATIONNAME="myApp"
BORDER="thin"
BORDERSTYLE="normal"
CAPTION="yes"
ICON="filename.ico"
MAXIMIZEBUTTON="yes"
MINIMIZEBUTTON="yes"
SHOWINTASKBAR="no"
INGLEINSTANCE="no"
SYSMENU="yes"
VERSION="1.0"
WINDOWSTATE="normal" />
</HEAD>
<BODY>
<b>http://www.okajax.com/</b>
</BODY>
</HTML>
有人會發現上面這些代碼與平時的html有點不同，多了HTA:APPLICATION標籤，這就是關鍵之處，hta通過它來提供一系列面向應用程序的功能，接下來再講一講它的屬性（我的頭又在發脹）
APPLICATIONNAME屬性(applicationName)
此屬性爲設置HTA的名稱。
BORDER屬性(border)
此屬性爲設置爲HTA的窗口邊框類型，默認值爲 thick。
它可以設爲 thick 指定窗口爲粗邊框
dialog window 指定窗口爲對話框
none 指定窗口無邊框
thin 指定窗口爲窄邊框
BORDERSTYLE屬性(borderStyle)
此屬性爲設置HTA窗口的邊框格式，默認值爲 normal。
它可以設爲
normal 普通邊框格式
complex 凹凸格式組合邊框
raised 凸出的3D邊框
static 3D邊框格式
sunken 凹進的3D邊框
CAPTION屬性(caption)
此屬性爲設置HTA窗口是否顯示標題欄或標題，默認值爲 yes。
ICON屬性(icon)
此屬性爲設置應用程序的圖標。
MAXIMIZEBUTTON屬性(maximizeButton)
此屬性爲設置是否在HTA窗口中顯示最大化按鈕，默認值爲 yes。
MINIMIZEBUTTON屬性(minimizeButton)
此屬性爲設置是否在HTA窗口中顯示最小化按鈕，默認值爲 yes。
SHOWINTASKBAR屬性(showInTaskBar)
此屬性爲設置是否在任務欄中顯示此應用程序，默認值爲 yes。
SINGLEINSTANCE屬性(singleInstance)
此屬性爲設置是否此應用程序同時只能運行一次。次屬性以APPLICATIONNAME屬性作爲標識，默認值爲 no。
SYSMENU屬性(sysMenu)
此屬性爲設置是否在HTA窗口中顯示系統菜單，默認值爲 yes。
VERSION屬性(version)
此屬性爲設置應用程序的版本，默認值爲空。
WINDOWSTATE屬性(windowState)
此屬性爲設置HTA窗口的初始大小，默認值爲 normal。
它可以設爲 normal 默認大小
minmize 最小化
maximize 最大化
以上括號中的是在腳本引用的屬性。在腳本中以上屬性皆爲只讀屬性。此外，在腳本中還可以使用commandLine屬性來檢索應用程序啓動時的參數。
在HTA中還可以繼續使用html中的絕大多數標籤、腳本等。
<SCRIPT LANGUAGE="javascript">
<!--
window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no,resizable=no,location=no, status=no')
//寫成一行
-->
</SCRIPT>
參數解釋：
window.open 彈出新窗口的命令；
'page.html' 彈出窗口的文件名；
'newwindow' 彈出窗口的名字（不是文件名），非必須，可用空''代替；
100 窗口高度；
width=400 窗口寬度；
top=0 窗口距離屏幕上方的象素值；
left=0 窗口距離屏幕左側的象素值；
toolbar=no 是否顯示工具欄，yes爲顯示；
menubar，scrollbars 表示菜單欄和滾動欄。
resizable=no 是否允許改變窗口大小，yes爲允許；
location=no 是否顯示地址欄，yes爲允許；
status=no 是否顯示狀態欄內的信息（通常是文件已經打開），yes爲允許；
二、 彈啓一個全屏窗口
加入fullscreen
<SCRIPT LANGUAGE="javascript">
<!--
window.open ('page.html', 'newwindow', 'fullscreen') //全屏了，自然其他條件就都失效了
-->
</SCRIPT>
三、 打開一個和按F11所見到的一樣的窗口
加入channelmode
<SCRIPT LANGUAGE="javascript">
<!--
window.open ('page.html', 'newwindow', channelmode)
-->
</SCRIPT>
四、 打開一個連標題欄都沒有的窗口（無標題、最小、最大、以及關閉按鈕）
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<script language="javascript">
function unload()
{
var popUpSizeX=200; //窗口的寬度
var popUpSizeY=166; //窗口的高度
var popUpLocationX=2;//距離左邊的距離 相當於 left
var popUpLocationY=2;//距離頂端的距離 相當於 top
// URL of the popUp
var popUpURL="http://www.33d9.com/default.asp";; //打開頁面的路徑
// ** 下面的就不要隨便改了 ***
splashWin = window.open("",'x','fullscreen=1, ,scrollbars=auto,resizable=1');
splashWin.blur(); // Hide while updating
window.focus();
splashWin.resizeTo(popUpSizeX,popUpSizeY);
splashWin.moveTo(popUpLocationX,popUpLocationY);
splashWin.location=popUpURL;
}
// END
unload();
</script>
</HEAD>
<BODY></BODY></HTML>
看看，什麼效果？ 如果把resizable 設爲0 scrollbars = no 呢？
五、 沒有最大化按紐的窗口
其實也就是象軟件的“關於我們”的那個窗口一樣，下面就是用對話框窗口來實現它。
showModalDialog()以及showModelessDialog()
1．用showModalDialog()
<html>
<SCRIPT LANGUAGE="javascript">
<!--
showModalDialog('http://www.okajax.com','example04','dialogWidth:400px;dialogHeight:300px;dialogLeft:200px;dialogTop:150px;center:yes;help:yes;resizable:yes;status:yes')
//-->
</SCRIPT>
<b>http://www.okajax.com/</b>
</body>
</html>
2．用showModelessDialog()
<html>
<SCRIPT LANGUAGE="javascript">
<!--
showModelessDialog('http://www.okajax.com','example05','dialogWidth:400px;dialogHeight:300px;dialogLeft:200px;dialogTop:150px;center:yes;help:yes;resizable:yes;status:yes')
//-->
</SCRIPT>
<b>http://www.okajax.com/</b>
</body>
</html>
至於showModalDialog()與showModelessDialog()的區別，在於showModalDialog()打開的窗口（簡稱模式窗口），置在父窗口上，必須關閉才能訪問父窗口(建議儘量少用，以免招人反感)；showModelessDialog()（簡稱無模式窗口），打開後不必關閉也可訪問父窗口打開的窗口。
現在我將這裏的一些參數說明一下。
dialogHeight: iHeight 設置對話框窗口的高度。
dialogWidth: iWidth 設置對話框窗口的寬度。
dialogLeft: iXPos 設置對話框窗口相對於桌面左上角的left位置。
dialogTop: iYPos 設置對話框窗口相對於桌面左上角的top位置。
center: {yes | no | 1 | 0 } 指定是否將對話框在桌面上居中，默認值是“yes”。
help: {yes | no | 1 | 0 } 指定對話框窗口中是否顯示上下文敏感的幫助圖標。默認值是“yes”。
resizable: {yes | no | 1 | 0 } 指定是否對話框窗口大小可變。默認值是“no”。
status: {yes | no | 1 | 0 } 指定對話框窗口是否顯示狀態欄。對於非模式對話框窗口，默認值是“yes”；對於模式對話框窗口，默認值是 “no”。
六、 彈出n 個窗口
這很簡單，只要執行n 次window.open()就行了，當然一定要給每個窗口起不同的名字，
還有，設置一下left和top，避免重疊。
七、 刷新之後就不再彈出窗口
我們使用cookie來控制一下就可以了。
首先，將如下代碼加入主頁面HTML的<HEAD>區：
<script>
function openwin(){
window.open("page.html","","width=200,200")
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (documents.cookie.length > 0) {
offset = documents.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = documents.cookie.indexOf(";", offset);
if (end == -1)
end = documents.cookie.length;
returnvalue=unescape(documents.cookie.substring(offset, end))
}
}
return returnvalue;
}
function loadpopup(){
if (get_cookie('popped')==''){
openwin()
documents.cookie="popped=yes"
}
}
</script>
然後，用<body 替換主頁面中原有的<BODY>這一句即可。你可以試着刷新一下這個頁面或重新進入該頁面，窗口再也不會彈出了。
八、 讓彈出窗口適應裏面圖片的大小
很多時候我們需要提供這樣的功能給訪問者：當訪問者點擊頁面中的縮略圖時，其對應的全尺寸圖片將顯示在一個新的彈出窗口中供訪問者查看。
實現此功能的最簡單作法是用以下HTML代碼創建一個圖像鏈接：
<a href="fullsize.jpg" _fcksavedurl=""fullsize.jpg"" target="_blank"><img src="small.jpg"></a>
其中<a>標記的href屬性指定全尺寸圖片的URL，target屬性設置爲_blank指定在新窗口中顯示該圖片；<img>標記的src屬性指定縮略圖的URL。
如果我們想對顯示全尺寸圖片的窗口的外觀進行某些控制（比如希望彈出窗口的高度、寬度能與全尺寸圖片的大小匹配時），則可調用 window.open 方法，該方法接收三個參數，分別指定要打開文件的URL，窗口名及窗口特性，在窗口特性參數中可指定窗口的高度、寬度，是否顯示菜單欄、工具欄等。以下代碼將顯示全尺寸圖片在一個沒有工具欄、地址欄、狀態欄、菜單欄，寬、高分別爲400、350的窗口中：
<a href="fullsize.jpg" onClick="window.open(this.href,'', 'height=350,width=400,toolbar=no,location=no,status=no,menubar=no');return false"><img src="small.jpg"></a>
這裏就提出了個問題，如果所有全尺寸圖片都具有統一的大小（比如都是400x350），那麼以上代碼適用於所有的縮略圖片鏈接（只是href屬性指向的全尺寸圖片文件不同）。但如果全尺寸圖片的大小並不統一，還用以上代碼則我們需要先取得每幅全尺寸圖片的大小，然後在window.open方法的窗口特性參數中一一設置height和width爲正確的值，在圖片數量較多的情況下，這顯然效率太低了。那麼是否有一勞永逸的方法，即讓彈出窗口能自動適應要顯示圖片的大小？通過研究，發現可以使用 DHTML 中的 Image 對象來達到我們的目的，Image 對象可動態裝載指定的圖片，通過讀取其 width 和 height 屬性即能獲得裝入圖片的大小，以此來設置彈出窗口的大小，即可實現自適應圖片大小的彈出窗口了。下面即是實現代碼:
<script language="javascript" type="text/javascript">
<!--
var imgObj;
function checkImg(theURL,winName){
// 對象是否已創建
if (typeof(imgObj) == "object"){
// 是否已取得了圖像的高度和寬度
if ((imgObj.width != 0) && (imgObj.height != 0))
// 根據取得的圖像高度和寬度設置彈出窗口的高度與寬度，並打開該窗口
// 其中的增量 20 和 30 是設置的窗口邊框與圖片間的間隔量
OpenFullSizeWindow(theURL,winName, ",width=" + (imgObj.width+20) + ",height=" + (imgObj.height+30));
else
// 因爲通過 Image 對象動態裝載圖片，不可能立即得到圖片的寬度和高度，所以每隔100毫秒重複調用檢查
setTimeout("checkImg('" + theURL + "','" + winName + "')", 100)
}
}
function OpenFullSizeWindow(theURL,winName,features) {
var aNewWin, sBaseCmd;
// 彈出窗口外觀參數
sBaseCmd = "toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,";
// 調用是否來自 checkImg
if (features == null || features == ""){
// 創建圖像對象
imgObj = new Image();
// 設置圖像源
imgObj.src = theURL;
// 開始獲取圖像大小
checkImg(theURL, winName)
}
else{
// 打開窗口
aNewWin = window.open(theURL,winName, sBaseCmd + features);
// 聚焦窗口
aNewWin.focus();
}
}
//-->
</script>
使用時將上面的代碼放在網頁文檔的<head></head>標記對中，然後在鏈接的點擊事件中調用OpenFullSizeWindow函數，如<a href="fullsize.jpg" onClick="OpenFullSizeWindow(this.href,'','');return false"><img src="small.jpg"></a>即可。
以上代碼在IE 5.x－6.0中測試通過。
九、 比較靈活的HTA窗口
我簡單介紹一下，HTA的全名爲HTML Application，翻譯過來就是HTML應用程序，你只要簡單的用.hta爲擴展名保存HTML頁面就算創建了一個HTA文件，下面我們就用HTA來編個窗口，將以下這段代碼保存爲.hta文件，然後再用瀏覽器打開，會發現什麼？買個關子，自己去瞧瞧。
<HTML>
<HEAD>
<TITLE>http://www.okajax.com/</TITLE>
<HTA:APPLICATION ID="oHTA"
APPLICATIONNAME="myApp"
BORDER="thin"
BORDERSTYLE="normal"
CAPTION="yes"
ICON="filename.ico"
MAXIMIZEBUTTON="yes"
MINIMIZEBUTTON="yes"
SHOWINTASKBAR="no"
INGLEINSTANCE="no"
SYSMENU="yes"
VERSION="1.0"
WINDOWSTATE="normal" />
</HEAD>
<BODY>
<b>http://www.okajax.com/</b>
</BODY>
</HTML>
有人會發現上面這些代碼與平時的html有點不同，多了HTA:APPLICATION標籤，這就是關鍵之處，hta通過它來提供一系列面向應用程序的功能，接下來再講一講它的屬性（我的頭又在發脹）
APPLICATIONNAME屬性(applicationName)
此屬性爲設置HTA的名稱。
BORDER屬性(border)
此屬性爲設置爲HTA的窗口邊框類型，默認值爲 thick。
它可以設爲 thick 指定窗口爲粗邊框
dialog window 指定窗口爲對話框
none 指定窗口無邊框
thin 指定窗口爲窄邊框
BORDERSTYLE屬性(borderStyle)
此屬性爲設置HTA窗口的邊框格式，默認值爲 normal。
它可以設爲
normal 普通邊框格式
complex 凹凸格式組合邊框
raised 凸出的3D邊框
static 3D邊框格式
sunken 凹進的3D邊框
CAPTION屬性(caption)
此屬性爲設置HTA窗口是否顯示標題欄或標題，默認值爲 yes。
ICON屬性(icon)
此屬性爲設置應用程序的圖標。
MAXIMIZEBUTTON屬性(maximizeButton)
此屬性爲設置是否在HTA窗口中顯示最大化按鈕，默認值爲 yes。
MINIMIZEBUTTON屬性(minimizeButton)
此屬性爲設置是否在HTA窗口中顯示最小化按鈕，默認值爲 yes。
SHOWINTASKBAR屬性(showInTaskBar)
此屬性爲設置是否在任務欄中顯示此應用程序，默認值爲 yes。
SINGLEINSTANCE屬性(singleInstance)
此屬性爲設置是否此應用程序同時只能運行一次。次屬性以APPLICATIONNAME屬性作爲標識，默認值爲 no。
SYSMENU屬性(sysMenu)
此屬性爲設置是否在HTA窗口中顯示系統菜單，默認值爲 yes。
VERSION屬性(version)
此屬性爲設置應用程序的版本，默認值爲空。
WINDOWSTATE屬性(windowState)
此屬性爲設置HTA窗口的初始大小，默認值爲 normal。
它可以設爲 normal 默認大小
minmize 最小化
maximize 最大化
以上括號中的是在腳本引用的屬性。在腳本中以上屬性皆爲只讀屬性。此外，在腳本中還可以使用commandLine屬性來檢索應用程序啓動時的參數。
在HTA中還可以繼續使用html中的絕大多數標籤、腳本等。