windo.open 全攻略
生活随笔
收集整理的這篇文章主要介紹了
windo.open 全攻略
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
Window.open()?? 全攻略??
???
? 【1、最基本的彈出窗口代碼】??
???
? 其實代碼非常簡單：??
???
? <SCRIPT?? LANGUAGE="javascript">??
? <!--??
? window.open?? ('page.html')??
? -->??
? </SCRIPT>??
???
? 因為這是一段javascripts代碼，所以它們應(yīng)該放在<SCRIPT?? LANGUAGE="javascript">標(biāo)簽和</script>之間。<!--?? 和?? -->是對一些版本低的瀏覽器起作用，在這些老瀏覽器中不會將標(biāo)簽中的代碼作為文本顯示出來。要養(yǎng)成這個好習(xí)慣啊。?? window.open?? ('page.html')?? 用于控制彈出新的窗口page.html，如果page.html不與主窗口在同一路徑下，前面應(yīng)寫明路徑，絕對路徑(http://)和相對路徑(..?? /)均可。?? 用單引號和雙引號都可以，只是不要混用。?? 這一段代碼可以加入HTML的任意位置，<head>和</head>之間可以，<body>間</body>也可以，越前越早執(zhí)行，尤其是頁面代碼長，又想使頁面早點彈出就盡量往前放。??
???
? 【2、經(jīng)過設(shè)置后的彈出窗口】??
???
? 下面再說一說彈出窗口的設(shè)置。只要再往上面的代碼中加一點東西就可以了。?? 我們來定制這個彈出的窗口的外觀，尺寸大小，彈出的位置以適應(yīng)頁面的具體情況。??
???
? <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>??
???
? 參數(shù)解釋：??
???
? <SCRIPT?? LANGUAGE="javascript">?? js腳本開始；??
? window.open?? 彈出新窗口的命令；??
? 'page.html'?? 彈出窗口的文件名；??
? 'newwindow'?? 彈出窗口的名字（不是文件名），非必須，可用空''代替；??
? height=100?? 窗口高度；??
? width=400?? 窗口寬度；??
? top=0?? 窗口距離屏幕上方的象素值；??
? left=0?? 窗口距離屏幕左側(cè)的象素值；??
? toolbar=no?? 是否顯示工具欄，yes為顯示；??
? menubar，scrollbars?? 表示菜單欄和滾動欄。??
? resizable=no?? 是否允許改變窗口大小，yes為允許；??
? location=no?? 是否顯示地址欄，yes為允許；??
? status=no?? 是否顯示狀態(tài)欄內(nèi)的信息（通常是文件已經(jīng)打開），yes為允許；??
? </SCRIPT>?? js腳本結(jié)束??
???
? 【3、用函數(shù)控制彈出窗口】??
???
? 下面是一個完整的代碼。??
? <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?? οnlοad="openwin()">??
? ...任意的頁面內(nèi)容...??
? </body>??
? </html>??
???
? 這里定義了一個函數(shù)openwin(),函數(shù)內(nèi)容就是打開一個窗口。在調(diào)用它之前沒有任何用途。怎么調(diào)用呢？??
???
? 方法一：<body?? οnlοad="openwin()">?? 瀏覽器讀頁面時彈出窗口；??
? 方法二：<body?? οnunlοad="openwin()">?? 瀏覽器離開頁面時彈出窗口；??
? 方法三：用一個連接調(diào)用：??
? <a?? href="#"?? onClick="openwin()">打開一個窗口?? </a>注意：使用的“#”是虛連接。??
? 方法四：用一個按鈕調(diào)用：??
? <input?? type="button"?? οnclick="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控制一下彈出的位置不要相互覆蓋即可。最后用上面說過的四種方法調(diào)用即可。??
? 注意：2個窗口的name(newwindows和newwindow2)不要相同，或者干脆全部為空。??
???
? OK？??
???
? 【5、主窗口打開文件1.htm，同時彈出小窗口page.html】??
???
? 如下代碼加入主窗口<head>區(qū)：??
???
? <script?? language="javascript">??
???
???
? //寫成一行??
? 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>??
? 打開一個窗口??
? <input?? type="button"?? οnclick="openwin()"?? value="打開窗口">??
? </body>??
? </html>??
???
? 看看?? OpenWindow.document.write()里面的代碼不就是標(biāo)準(zhǔn)的HTML嗎？只要按照格式寫更多的行即可。千萬注意多一個標(biāo)簽或少一個標(biāo)簽就會出現(xiàn)錯誤。記得用OpenWindow.document.close()結(jié)束啊。??
???
? 【6、終極應(yīng)用--彈出的窗口之Cookie控制】??
???
? 回想一下，上面的彈出窗口雖然酷，但是有一點小毛病(沉浸在喜悅之中，一定沒有發(fā)現(xiàn)吧？)比如你將上面的腳本放在一個需要頻繁經(jīng)過的頁面里(例如首頁)，?? 那么每次刷新這個頁面，窗口都會彈出一次，是不是非常煩人？:-(??
???
? 有解決的辦法嗎？Yes!?? ;-)?? Follow?? me.??
???
? 我們使用cookie來控制一下就可以了。??
???
? 首先，將如下代碼加入主頁面HTML的<HEAD>區(qū)：??
???
? <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?? οnlοad="loadpopup()">（注意不是openwin而是loadpop啊！）?? 替換主頁面中原有的<BODY>這一句即可。你可以試著刷新一下這個頁面或重新進入該頁面，窗口再也不會彈出了。真正的Pop-Only-Once！
???
? 【1、最基本的彈出窗口代碼】??
???
? 其實代碼非常簡單：??
???
? <SCRIPT?? LANGUAGE="javascript">??
? <!--??
? window.open?? ('page.html')??
? -->??
? </SCRIPT>??
???
? 因為這是一段javascripts代碼，所以它們應(yīng)該放在<SCRIPT?? LANGUAGE="javascript">標(biāo)簽和</script>之間。<!--?? 和?? -->是對一些版本低的瀏覽器起作用，在這些老瀏覽器中不會將標(biāo)簽中的代碼作為文本顯示出來。要養(yǎng)成這個好習(xí)慣啊。?? window.open?? ('page.html')?? 用于控制彈出新的窗口page.html，如果page.html不與主窗口在同一路徑下，前面應(yīng)寫明路徑，絕對路徑(http://)和相對路徑(..?? /)均可。?? 用單引號和雙引號都可以，只是不要混用。?? 這一段代碼可以加入HTML的任意位置，<head>和</head>之間可以，<body>間</body>也可以，越前越早執(zhí)行，尤其是頁面代碼長，又想使頁面早點彈出就盡量往前放。??
???
? 【2、經(jīng)過設(shè)置后的彈出窗口】??
???
? 下面再說一說彈出窗口的設(shè)置。只要再往上面的代碼中加一點東西就可以了。?? 我們來定制這個彈出的窗口的外觀，尺寸大小，彈出的位置以適應(yīng)頁面的具體情況。??
???
? <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>??
???
? 參數(shù)解釋：??
???
? <SCRIPT?? LANGUAGE="javascript">?? js腳本開始；??
? window.open?? 彈出新窗口的命令；??
? 'page.html'?? 彈出窗口的文件名；??
? 'newwindow'?? 彈出窗口的名字（不是文件名），非必須，可用空''代替；??
? height=100?? 窗口高度；??
? width=400?? 窗口寬度；??
? top=0?? 窗口距離屏幕上方的象素值；??
? left=0?? 窗口距離屏幕左側(cè)的象素值；??
? toolbar=no?? 是否顯示工具欄，yes為顯示；??
? menubar，scrollbars?? 表示菜單欄和滾動欄。??
? resizable=no?? 是否允許改變窗口大小，yes為允許；??
? location=no?? 是否顯示地址欄，yes為允許；??
? status=no?? 是否顯示狀態(tài)欄內(nèi)的信息（通常是文件已經(jīng)打開），yes為允許；??
? </SCRIPT>?? js腳本結(jié)束??
???
? 【3、用函數(shù)控制彈出窗口】??
???
? 下面是一個完整的代碼。??
? <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?? οnlοad="openwin()">??
? ...任意的頁面內(nèi)容...??
? </body>??
? </html>??
???
? 這里定義了一個函數(shù)openwin(),函數(shù)內(nèi)容就是打開一個窗口。在調(diào)用它之前沒有任何用途。怎么調(diào)用呢？??
???
? 方法一：<body?? οnlοad="openwin()">?? 瀏覽器讀頁面時彈出窗口；??
? 方法二：<body?? οnunlοad="openwin()">?? 瀏覽器離開頁面時彈出窗口；??
? 方法三：用一個連接調(diào)用：??
? <a?? href="#"?? onClick="openwin()">打開一個窗口?? </a>注意：使用的“#”是虛連接。??
? 方法四：用一個按鈕調(diào)用：??
? <input?? type="button"?? οnclick="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控制一下彈出的位置不要相互覆蓋即可。最后用上面說過的四種方法調(diào)用即可。??
? 注意：2個窗口的name(newwindows和newwindow2)不要相同，或者干脆全部為空。??
???
? OK？??
???
? 【5、主窗口打開文件1.htm，同時彈出小窗口page.html】??
???
? 如下代碼加入主窗口<head>區(qū)：??
???
? <script?? language="javascript">??
???
???
? //寫成一行??
? 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>??
? 打開一個窗口??
? <input?? type="button"?? οnclick="openwin()"?? value="打開窗口">??
? </body>??
? </html>??
???
? 看看?? OpenWindow.document.write()里面的代碼不就是標(biāo)準(zhǔn)的HTML嗎？只要按照格式寫更多的行即可。千萬注意多一個標(biāo)簽或少一個標(biāo)簽就會出現(xiàn)錯誤。記得用OpenWindow.document.close()結(jié)束啊。??
???
? 【6、終極應(yīng)用--彈出的窗口之Cookie控制】??
???
? 回想一下，上面的彈出窗口雖然酷，但是有一點小毛病(沉浸在喜悅之中，一定沒有發(fā)現(xiàn)吧？)比如你將上面的腳本放在一個需要頻繁經(jīng)過的頁面里(例如首頁)，?? 那么每次刷新這個頁面，窗口都會彈出一次，是不是非常煩人？:-(??
???
? 有解決的辦法嗎？Yes!?? ;-)?? Follow?? me.??
???
? 我們使用cookie來控制一下就可以了。??
???
? 首先，將如下代碼加入主頁面HTML的<HEAD>區(qū)：??
???
? <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?? οnlοad="loadpopup()">（注意不是openwin而是loadpop啊！）?? 替換主頁面中原有的<BODY>這一句即可。你可以試著刷新一下這個頁面或重新進入該頁面，窗口再也不會彈出了。真正的Pop-Only-Once！
轉(zhuǎn)載于:https://www.cnblogs.com/shuyu/archive/2010/04/02/1702786.html
總結(jié)
以上是生活随笔為你收集整理的windo.open 全攻略的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： WF4.0 基础篇 (二十八) WF调用
- 下一篇： httphandlers 与 httpm