JS 彈出網頁 (不顯示地址欄,工具欄) 網頁去掉地址欄
window.open()支持環境:
JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+
基本語法:
window.open(pageURL,name,parameters)
其中:
pageURL 為子窗口路徑
name 為子窗口句柄
parameters 為窗口參數(各參數用逗號分隔)
window.open(url, name, features, replace)
Arguments - 參數
url
可選字符串參數,指向要在新窗口中顯示的文檔的URL。如果省略該參數,或者參數為空字符串,新窗口不會顯示文檔。
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>
…任意的頁面內容…
</body>
</html>
這里定義了一個函數openwin(),函數內容就是打開一個窗口。在調用它之前沒有任何用途。
怎么調用呢?
方法一:<body> 瀏覽器讀頁面時彈出窗口;
方法二:<body> 瀏覽器離開頁面時彈出窗口;
方法三:用一個連接調用:
<a href="#">打開一個窗口</a>
注意:使用的"#"是虛連接。
方法四:用一個按鈕調用:
<input type="button" 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">open</a>即可。
【6、彈出的窗口之定時關閉控制】
下面我們再對彈出的窗口進行一些控制,效果就更好了。如果我們再將一小段代碼加入彈出的頁面(注意是加入到page.html的HTML中,可不是主頁面中,否則…),讓它10秒后自動關閉是不是更酷了?
首先,將如下代碼加入page.html文件的<head>區:
<script language="JavaScript">
function closeit()
{setTimeout("self.close()",10000) //毫秒}
</script>
然后,再用<body> 這一句話代替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="#">打開一個窗口</a>
<input type="button" 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>(注意不是openwin而是loadpop啊!)替換主頁面中原有的<BODY>這一句即可。你可以試着刷新一下這個頁面或重新進入該頁面,窗口再也不會彈出了。真正的Pop-Only-Once!
寫到這里彈出窗口的制作和應用技巧基本上算是完成了,俺也累壞了,一口氣說了這么多,希望對正在制作網頁的朋友有所幫助俺就非常欣慰了。
需要注意的是,JS腳本中的的大小寫最好前后保持一致。