首頁 > web前端 > js教程 > js中widow.open()方法使用詳解_基礎知識

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

WBOY
發布: 2016-05-16 17:27:52
原創
1007 人瀏覽過
一、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腳本中的大小寫最好前後保持一致。
相關標籤:
js
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板