js中widow.open()方法使用詳解_基礎知識

一、window.open()支援環境：
JavaScript1.0 /JScript1.0 /Nav2 /IE3 /Opera3

二、基本語法：
window.open(pageURL,name,parameters)
其中：
pageURL 為子視窗路徑
name 為子視窗句柄
parameters 為視窗參數(各參數以逗號分隔)

三、範例：

複製程式碼 程式碼如下:

程式碼如下:
<script> <BR><!-- <BR>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') <BR>//寫成一行<BR>--> <BR></script>

腳本運行後，page.html將在新窗體newwindow中打開，寬為100，高為400，距屏頂0像素，屏左0像素，無工具條，無菜單條，無滾動條，不可調整大小，無網址列，無狀態列。請對照。
上例中涉及的為常用的幾個參數，除此之外還有許多其他參數，請見四。
四、各項參數

其中yes/no也可使用1/0；pixel value為具體的數值，單位像素。

參數| 取值範圍| 說明

alwaysLowered | yes/no | 指定視窗隱藏在所有視窗之後
alwaysRaised | yes/no | 指定視窗懸浮在所有視窗之後
alwaysRaised | yes/no | 指定視窗懸浮在所有視窗之上
depended | yes/no | 是否和父視窗同時關閉
directories | yes/no | Nav2和3的目錄列是否可見
height | pixel value | 視窗高度
hotkeys | yes/no |在沒選單列的視窗中設安全退出熱鍵
innerHeight | pixel value | 視窗中文件的像素高度
innerWidth | pixel value | 視窗中文件的像素寬度
location | yes/no | 位置欄位是否可見
menubar | yes/no | 選單列是否可見
outerHeight | pixel value | 設定視窗(包括裝飾邊框)的像素高度
outerWidth | pixel value | 設定視窗(包括裝飾邊框)的像素寬度
resizable | yes/no | 視窗大小是否可調整
screenX | pixel value | 視窗距螢幕左邊界的像素長度
screenY | pixel value | 視窗距螢幕上邊界的像素長度
screenY | pixel value | 視窗距螢幕上邊界的像素長度
scrollbars | yes/no | 視窗是否可有滾動列
titlebar | yes/no | 視窗題目列是否可見
toolbar | yes/no | 視窗工具列是否可見
Width | pixel value | 視窗的像素寬度
z-look | yes/no | 視窗啟動後是否浮在其它視窗之上

================= ====================================

【1、最基本的彈出窗口程式碼】 其實程式碼很簡單：複製程式碼

程式碼如下：


程式碼如下：




因為著是一段javascripts程式碼，所以它們應該放在之間。 是對某些版本低的瀏覽器起作用，在這些舊瀏覽器中不會將標籤中的程式碼顯示為文字。要養成這個好習慣。
Window.open ('page.html') 用來控制彈出新的視窗page.html，如果page.html不與主視窗在同一路徑下，前面應寫明路徑，絕對路徑(http:// )和相對路徑(../)均可。用單引號和雙引號都可以，但不要混用。
這段程式碼可以加入HTML的任意位置，和之間可以，間也可以，越前越早執行，尤其是頁面程式碼長，又想使頁面早點彈出就盡量往前放。

【2、經過設定後的彈出視窗】

下面再說一說彈出視窗的設定。只要再往上面的程式碼加一點東西就可以了。 我們來客製化這個彈出的視窗的外觀，尺寸大小，彈出的位置以適應該頁面的具體情況。 複製程式碼

程式碼如下:


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')
//寫成一行
-->

參數解釋：
js腳本結束

【3、用函數控制彈出視窗】

下面是完整的程式碼。

複製代碼 代碼如下:

…任意的頁面內容…

這裡定義了一個函數openwin(),函數內容就是開啟一個視窗。在調用它之前沒有任何用途。
怎麼呼叫呢？
方法一： 瀏覽器讀取頁面時彈出視窗；
方法二： 瀏覽器離開頁面時彈出視窗；
方法三：用一個連線呼叫：
開啟一個視窗
注意：使用的"#"是虛連接。
方法四：用一個按鈕呼叫：


【4、同時彈出2個視窗】

對源代碼稍微改動一下：

複製代碼 代碼如下:

為避免彈出的2個視窗覆蓋，用top和left控制一下彈出的位置不要互相覆蓋即可。最後用上面說的四種方法呼叫即可。
注意：2個視窗的name(newwindows和newwindow2)不要相同，或乾脆全部為空。 OK？

【5、主視窗開啟檔案1.htm，同時彈出小視窗page.html】

以下程式碼加入主視窗區：

複製程式碼 程式碼如下:

加入區：
open即可。

【6、彈出的視窗之定時關閉控制】

下面我們再對彈出的視窗進行一些控制，效果就更好了。如果我們再將一小段程式碼加入彈出的頁面(注意是加入到page.html的HTML中，可不是主頁面中，否則…)，讓它10秒後自動關閉是不是更酷了？
首先，將下列程式碼加入page.html檔案的區：

複製程式碼 程式碼如下:

然後，再用 這句話代替page.html中原有的這句話就可以了。 (這句話千萬不要忘記寫啊！這一句的作用是呼叫關閉視窗的程式碼，10秒鐘後就自行關閉該視窗。)

【7.在彈出視窗中加上一個關閉按鈕】

，現在更呵呵完美了！

【8、內包含的彈出窗口-一個頁面兩個窗口】

上面的例子都包含兩個窗口，一個是主窗口，另一個是彈出的小窗口。
透過下面的例子，你可以在一個頁面內完成上面的效果。

複製代碼 代碼如下:

開啟一個視窗

看看OpenWindow.document.write()裡面的程式碼不就是標準的HTML嗎？只要按照格式寫更多的行即可。千萬注意多一個標籤或少一個標籤就會出現錯誤。記得用OpenWindow.document.close()結束啊。

【9、終極應用--彈出的窗口之Cookie控制】

回想一下，上面的彈出窗口雖然酷，但是有一點小毛病(沉浸在喜悅之中，一定沒有發現吧？ :-(有解決的方法嗎？Yes! ;-) Follow me.
我們使用cookie來控制一下就可以了。
首先，將下列程式碼加入主頁HTML的區：

複製程式碼 程式碼如下:

<script> <BR>function openwin() <BR>{window.open("page.html","","width=200,height=200")} <BR>function get_cookie( Name) <BR>{var search = Name "=" <BR>var returnvalue = ""; <BR>if (document.cookie.length > 0) { <BR>offset = document.cookie.indexOf(search) <BR>if (offset != -1) { <BR>offset = search.length <BR>end = document.cookie.indexOf(";", offset); <BR>if (end == -1) <BR>end = document.cookie.length; <BR>returnvalue=unescape(document.cookie.substring(offset,end)) <BR>} <BR>} <BR>return returnvalue; <BR>} <BR>} <BR>return returnvalue; <BR>} <BR>function loadup (){ <BR>if (get_cookie('popped')==''){ <BR>openwin() <BR>document.cookie="popped=yes" <BR>} </script>

}

然後，用（注意不是openwin而是loadpop啊！）替換主頁中原有的這句話即可。你可以試著刷新這個頁面或重新進入該頁面，視窗再也不會彈出了。真正的Pop-Only-Once！ 寫到這裡彈出視窗的製作和應用技巧基本上算是完成了，需要注意的是，JS腳本中的大小寫最好前後保持一致。