window.open

計算機語言，程式中參數的一種，下面詳細介紹1。

基本介紹

• 外文名：window.open
• 性質：計算機語言，程式中參數的一種
• pageURL： 子視窗路徑
• name ：子視窗句柄

簡介

window.open（）支持環境：

JavaScript1.0+/JScript1.0+/Nav2+/IE3以上版本+/Opera3+Fireforx

基本語法：

window.open(pageURL,name,parameters)

其中：

pageURL 為子視窗路徑

name 為子視窗句柄

parameters 為視窗參數（各參數用逗號分隔）

window.open(url,name,features,replace)

Arguments - 參數

url

可選字元串參數，指向要在新視窗中顯示的文檔的URL。如果省略該參數，或者參數為空字元串，新視窗不會顯示文檔。

name

可選字元串參數，該參數可以設定新視窗的名稱。

相同name的視窗只能創建一個，要想創建多個視窗則name不能相同。

name 不能包含有空格。

features

可選字元串參數，該參數用於設定新視窗的功能。因為該參數是可選的，如果沒有指定該參數，新視窗有所有的標準功能。

replace

可選布爾參數，設定新視窗中的操作歷史的保存方式。

true - 創建新歷史記錄

false - 替換舊的歷史記錄

返回值

一個根據name參數對新創建的或已存在的視窗對象的引用。

描述

open（）方法可以查找一個已經存在的或者新建的瀏覽器視窗。如果name參數指定了一個已經存在的瀏覽器視窗，則返回對該視窗的引用。返回的視窗中將顯示URL中指定的文檔，但是features參數會被忽略。open（）方法是JavaScript中唯一通過名稱獲得瀏覽器視窗引用的途徑。

如果沒有指定name參數，或者不存在name參數指定的名稱的視窗，open（）方法將創建一個新的瀏覽器視窗。

name參數用於指定新視窗的名稱， 該名稱必須由字母、數字和下劃線字元組成。它可以被HTML文檔中的<a>標記或<form>；標記指向。

當你使用window.open（）方法載入一個新的文檔到一個已經存在了命名的視窗中時，你可以通過replace參數設定歷史記錄的保存方式.。如果該參數是true，新文檔的歷史記錄將取代舊文檔的歷史記錄。如果該參數為false或這沒有指定該參數， 新的檔案在視窗的瀏覽歷史記錄中將建立自己的條目。該參數提供了location.replace（）相同功能的方式。

不要把"Window.open() "和"Document.open()"混淆；這是兩個完全不一樣的方法。為了讓代碼更明晰， 你可以用"Window.open()"代替 "open()"。作為HTML屬性定義事件處理程式時， "open()" 一般被解釋為"Document.open()"，所以在這種情況下， 你必須使用"Window.open()"。

視窗特性

feature參數是一個用逗號分隔的功能列表。如果該參數為空或者沒有指定該參數，新的視窗將擁有所有的功能。另一方面，如果feature參數只指定了某一項或某幾項功能，那么其他沒有被指定的功能將不會出現在新的視窗中。該字元串不能包含任何空格或其它空字元串。

列表中的每個元素的格式：功能[=值]

對於絕大多數的功能來說，它們的值一般都是yes或no。對這些功能，等號和值都可以省略不寫。對於 width和height特性， 必須給它們指定一個以像素為單位的值。

以下是一些普遍支持的功能和它們的含義：

alwaysLowered

Internet Explorer：不支持

Navigator：版本 4+

指定視窗總是保留在堆疊的最下面。換言之，不管新視窗是否激活，總是其他視窗下。

window.open("alwayslowered.html","_blank","alwaysLowered");

alwaysRaised 　Internet Explorer：不支持

Navigator：版本 4+

指定視窗總是保留在堆疊的最上面。換言之，不管新視窗是否激活，總是其他視窗上。

window.open("alwaysraised.html","_blank","alwaysRaised");

channelmode

Internet Explorer：版本 4+

Navigator：不支持

指定是否按照劇場模式顯示視窗，以及是否顯示頻道區。

window.open("channelmode.html","_blank","channelmode");

dependent

Internet Explorer：不支持

Navigator：版本 4+

定義是否視窗成為當前打開視窗的依賴子視窗。依賴視窗就是當它的父視窗關閉時，它也隨即關閉。在windows平台上，一個依賴視窗不會在系統列上顯示。

window.open("dependent.html","_blank","dependent");

directories

Internet Explorer：所有版本

Navigator：所有版本

指定是否顯示目錄按鈕（比如眾所周知的"What's Cool" and "What's New" 按鈕）。Internet Explorer將這些目錄按鈕引用為連結工具列，Navigator（版本4和以上）稱之為個人工具列。

window.open("directories.html","_blank","directories");

fullscreen

Internet Explorer：版本 4+

Navigator：不支持

定義是否按照全螢幕方式打開瀏覽器。請小心使用全螢幕模式，因為在這種模式下，瀏覽器的標題欄和選單都被隱藏，所有你應該提供一個按鈕或者其他可視的線索來幫助用戶關閉這個視窗。當然，使用熱鍵ALT+F4也能關閉視窗。

window.open("fullscreen.html","_blank","fullscreen");

height

Internet Explorer：所有版本

Navigator：所有版本

以象素pixel為單位定義視窗文檔顯示區域的高度，最小數值是100。如果僅僅定義高度，Internet Explorer使用給定的高度和默認的寬度。對於Navigator，如果不同時指定width或者innerWidth，那么就將忽略這個屬性。

window.open("height.html","_blank","height=200,width=300");

hotkeys

Internet Explorer：不支持

Navigator：版本 4+

如果沒有定義（或者為0），那么就禁止了沒有選單條的新視窗的大部分熱鍵。但是安全以及退出熱鍵仍然保留。

window.open("hotkeys.html","_blank","hotkeys=0,menubar=0");

innerHeight

Internet Explorer：不支持

Navigator：版本 4+

以象素pixel為單位定義視窗文檔顯示區域的高度，最小數值是100。在Navigator版本4中，這個特徵替換height，為得是保持向後兼容。對於Navigator，如果不同時指定width或者innerWidth，那么就將忽略這個屬性。

window.open("innerheight.html","_blank","innerHeight=200,innerWidth=300");

innerWidth

Internet Explorer：不支持

Navigator：版本 4+

以象素pixel為單位定義視窗文檔顯示區域的寬度，最小數值是100。在Navigator版本4中，這個特徵替換width，為得是保持向後兼容。對於Navigator，如果不同時指定height或者innerHeight，那么就將忽略這個屬性。

window.open("innerwidth.html","_blank","innerHeight=200,innerWidth=300");

left

Internet Explorer：版本 4+

Navigator：不支持

以象素為單位定義視窗的X左標。

window.open("left.html","_blank","left=20");

location

Internet Explorer：所有版本

Navigator：所有版本

定義是否顯示瀏覽器中供地址URL輸入的文本域。

window.open("location.html","_blank","location");

menubar

Internet Explorer：所有版本

Navigator：所有版本

定義是否顯示選單條（選單條位於視窗頂部，包括“檔案”和“編輯”等）。

window.open("menubar.html","_blank","menubar");

outerHeight

Internet Explorer：不支持

Navigator：版本 4+

以象素為單位定義視窗（它的外部邊界）的總高度，最小數值比100多一些，因為視窗內容區域的高度必須至少是100。如果沒有同時定義outerWidth，Navigator將忽視這個特徵。

window.open("outerheight.html","_blank","outerHeight=200,outerWidth=300");

outerWidth

Internet Explorer：不支持

Navigator：版本 4+

以象素為單位定義視窗（它的外部邊界）的總寬度，最小數值比100多一些，因為視窗內容區域的寬度必須至少是100。如果沒有同時定義outerHeight，Navigator將忽視這個特徵。

window.open("outerwidth.html","_blank","outerHeight=200,outerWidth=300");

resizable

Internet Explorer：所有版本

Navigator：所有版本

定義是否視窗可以通過它的邊界進行大小縮放控制。依賴於平台不同，用戶也許還有其他改變視窗大小的方法。

window.open("resizable.html","_blank","resizable");

screenX

Internet Explorer：不支持

Navigator：版本 4+

以象素為單位定義視窗的X坐標。

window.open("screenx.html","_blank","screenX=20");

screenY

Internet Explorer：不支持

Navigator：版本 4+

以象素為單位定義視窗的Y坐標。

window.open("screeny.html","_blank","screenY=20");

scrollbars

Internet Explorer：所有版本

Navigator：所有版本

定義是否激活水平和垂直滾動條。

window.open("scrollbars.html","_blank","scrollbars");

status

Internet Explorer：所有版本

Navigator：所有版本

定義是否在視窗的下部添加狀態欄。

window.open("status.html","_blank","status");

titlebar

Internet Explorer：Version 5+

Navigator：版本 4+

定義是否顯示視窗的標題欄。在Internet Explorer中，除非調用者是一個HTML應用程式或者一個可信任的對話框，那么這個特徵是被禁止的。

window.open("titlebar.html","_blank","titlebar=0");

toolbar

Internet Explorer：所有版本

Navigator：所有版本

定義是否顯示瀏覽器的工具列（位於視窗的上部，包括“後退”和“向前”）。

window.open("toolbar.html","_blank","toolbar");

top

Internet Explorer：版本 4+

Navigator：不支持

以象素為單位定義視窗的縱坐標。

window.open("top.html","_blank","top=20");

width

Internet Explorer：所有版本

Navigator：所有版本

以象素pixel為單位定義視窗文檔顯示區域的寬度，最小數值是100。如果僅僅定義寬度，Internet Explorer使用給定的寬度和默認的高度。對於Navigator，如果不同時指定height或者innerHeight，那么就將忽略這個屬性。

window.open("width.html","_blank","height=200,width=300");

z-lock

Internet Explorer：不支持

Navigator：版本 4+

定義視窗激活時不在堆疊中浮起，就是說，新視窗當被激活時並不能位於其他視窗之上。

window.open("zlock.html","_blank","z-lock");

示例

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="#" onclick="openwin()">；打開一個視窗</a>

注意：使用的"#"是虛連線。

方法四：用一個按鈕調用：

<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秒鐘後就自行關閉該視窗。）

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

<FORM>

<INPUT TYPE='BUTTON' VALUE='關閉' onClick='window.close()'>

</FORM>

呵呵，現在更加完美了！

【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=#ffffff>")

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="#" onclick="openwin()">；打開一個視窗</a>

<input type="button" onclick="openwin()" value="打開視窗">

</body>

</html>

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

【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 (document.cookie.length > 0) {

offset = document.cookie.indexOf(search)

if (offset != -1） {

offset += search.length

end = document.cookie.indexOf(";",offset);

if (end == -1）

end = document.cookie.length;

returnvalue=unescape(document.cookie.substring(offset,end))

}

}

return returnvalue;

}

function loadpopup(){

if (get_cookie('popped')==''){

openwin()

document.cookie="popped=yes"

}

}

</script>

然後，用<body onload="loadpopup()">；（注意不是openwin而是loadpop啊！）替換主頁面中原有的<BODY>；這一句即可。你可以試著刷新一下這個頁面或重新進入該頁面，視窗再也不會彈出了。真正的Pop-Only-Once！

寫到這裡彈出視窗的製作和套用技巧基本上算是完成了，俺也累壞了，一口氣說了這么多，希望對正在製作網頁的朋友有所幫助俺就非常欣慰了。

需要注意的是，JS腳本中的的大小寫最好前後保持一致。