分享java帶來的快樂

          我喜歡java新東西

          彈出窗口

          【1、最基本的彈出窗口代碼】 
            
            <SCRIPT LANGUAGE="javascript"> 
            <!-- 
            window.open ('page.html') 
            --> 
            </SCRIPT> 
            
            因?yàn)橹且欢蝚avascripts代碼,所以它們應(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í)行,尤其是頁面代碼長,又想使頁面早點(diǎn)彈出就盡量往前放。 
             
            【2、經(jīng)過設(shè)置后的彈出窗口】 
            
            下面再說一說彈出窗口的設(shè)置。只要再往上面的代碼中加一點(diǎn)東西就可以了。 我們來定制這個彈出的窗口的外觀,尺寸大小,彈出的位置以適應(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=n o, 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 onload="openwin()"> 
            任意的頁面內(nèi)容... 
            </body> 
            </html> 

            這里定義了一個函數(shù)openwin(),函數(shù)內(nèi)容就是打開一個窗口。在調(diào)用它之前沒有任何用途。怎么調(diào)用呢? 

            方法一:<body onload="openwin()"> 瀏覽器讀頁面時彈出窗口; 
            方法二:<body onunload="openwin()"> 瀏覽器離開頁面時彈出窗口; 
            方法三:用一個連接調(diào)用: 
            <a href="#" onclick="openwin()">打開一個窗口</a> 
            注意:使用的“#”是虛連接。 
            方法四:用一個按鈕調(diào)用: 
            <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=n o, status=no")//寫成一行 

            window.open ("page2.html", "newwindow2", "height=100, width=100, top=1 00, left=100,toolbar=no, 
          menubar=no, scrollbars=no, resizable=no, loca tion=no, status=no")//寫成一行 
            } 
            //--> 
            </script>
            為避免彈出的2個窗口覆蓋,用top和left控制一下彈出的位置不要相互覆蓋即可 。最后用上面說過的四種方法調(diào)用即可。 
            注意:2個窗口的name(newwindows和newwindow2)不要相同,或者干脆全部為空。  
            
            【5、主窗口打開文件1.htm,同時彈出小窗口page.html】 

            如下代碼加入主窗口<head>區(qū): 
            <script language="javascript"> 
            <!-- 
            function openwin() { 
            window.open("page.html","","width=200,height=200") 
            } 
            //--> 
            </script> 
            加入<body>區(qū): 
            <a href="1.htm" onclick="openwin()">open</a>即可。 

            
            【6、彈出的窗口之定時關(guān)閉控制】 
            
            下面我們再對彈出的窗口進(jìn)行一些控制,效果就更好了。如果我們再將一小段 代碼加入彈出的頁面(注意是加入page.html的HTML中,可不是主頁面中,否則 ...),讓它10秒后自動關(guān)閉是不是更酷了? 
          首先,將如下代碼加入page.html文件的<head>區(qū): 
            <script language="JavaScript"> 
            function closeit() 
            { 
            setTimeout("self.close()",10000) //毫秒 
            } 
            </script> 
            然后,再用<body onload="closeit()"> 這一句話代替page.html中原有的<BODY>這一句就可以了。(這一句話千萬不要忘記寫啊!這一句的作用是調(diào)用關(guān)閉窗 口的代碼,10秒鐘后就自行關(guān)閉該窗口。) 
            【7、在彈出窗口中加上一個關(guān)閉按鈕】 

            <FORM> 
            <INPUT TYPE='BUTTON' VALUE='關(guān)閉' onClick='window.close()'> 
            </FORM> 
            呵呵,現(xiàn)在更加完美了!

            【8、內(nèi)包含的彈出窗口-一個頁面兩個窗口】 

            上面的例子都包含兩個窗口,一個是主窗口,另一個是彈出的小窗口。通過下面的例子,你可以在一個頁面內(nèi)完成上面的效果。 


            <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()里面的代碼不就是標(biāo)準(zhǔn)的HTML嗎?只要按照 格式寫更多的行即可。千萬注意多一個標(biāo)簽或少一個標(biāo)簽就會出現(xiàn)錯誤。記得用 OpenWindow.document.close()結(jié)束啊。 

            【9、終極應(yīng)用--彈出的窗口之Cookie控制】 

            回想一下,上面的彈出窗口雖然酷,但是有一點(diǎn)小毛病(沉浸在喜悅之中,一定 沒有發(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 onload="loadpopup()">(注意不是openwin而是loadpop啊!)替換主頁面中原有的<BODY>這一句即可。你可以試著刷新一下這個頁面或重新進(jìn) 入該頁面,窗口再也不會彈出了。真正的Pop-Only-Once! 

            寫到這里彈出窗口的制作和應(yīng)用技巧基本上算是完成了!


          -------------------------------------------------------------------------------------



          【專題】window.open的例子和使用方法以及參數(shù)說明(完整版) 
          一、window.open()支持環(huán)境: java script1.0+/JScript1.0+/Nav2+/IE3+/Opera3+


          二、基本語法:
          window.open(pageURL,name,parameters) 
          其中:
          pageURL 為子窗口路徑 
          name 為子窗口句柄 
          parameters 為窗口參數(shù)(各參數(shù)用逗號分隔) 


          三、示例:
          <SCRIPT> 
          <!-- 
          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>
          腳本運(yùn)行后,page.html將在新窗體newwindow中打開,寬為100,高為400,距屏頂0象素,屏左0象素,無工具條,無菜單條,無滾動條,不可調(diào)整大小,無地址欄,無狀態(tài)欄。
          請對照。

          上例中涉及的為常用的幾個參數(shù),除此以外還有很多其他參數(shù),請見四。


          四、各項(xiàng)參數(shù)
          其中yes/no也可使用1/0;pixel value為具體的數(shù)值,單位象素。

          參數(shù) | 取值范圍 | 說明 
          | | 
          alwaysLowered | yes/no | 指定窗口隱藏在所有窗口之后 
          alwaysRaised | yes/no | 指定窗口懸浮在所有窗口之上 
          depended | yes/no | 是否和父窗口同時關(guān)閉 
          directories | yes/no | Nav2和3的目錄欄是否可見 
          height | pixel value | 窗口高度 
          hotkeys | yes/no | 在沒菜單欄的窗口中設(shè)安全退出熱鍵 
          innerHeight | pixel value | 窗口中文檔的像素高度 
          innerWidth | pixel value | 窗口中文檔的像素寬度 
          location | yes/no | 位置欄是否可見 
          menubar | yes/no | 菜單欄是否可見 
          outerHeight | pixel value | 設(shè)定窗口(包括裝飾邊框)的像素高度 
          outerWidth | pixel value | 設(shè)定窗口(包括裝飾邊框)的像素寬度 
          resizable | yes/no | 窗口大小是否可調(diào)整 
          screenX | pixel value | 窗口距屏幕左邊界的像素長度 
          screenY | pixel value | 窗口距屏幕上邊界的像素長度 
          scrollbars | yes/no | 窗口是否可有滾動欄 
          titlebar | yes/no | 窗口題目欄是否可見 
          toolbar | yes/no | 窗口工具欄是否可見 
          Width | pixel value | 窗口的像素寬度 
          z-look | yes/no | 窗口被激活后是否浮在其它窗口之上


          window.showModalDialog使用手冊!
          基本介紹:
          showModalDialog() (IE 4+ 支持)
          showModelessDialog() (IE 5+ 支持)
          window.showModalDialog()方法用來創(chuàng)建一個顯示HTML內(nèi)容的模態(tài)對話框。
          window.showModelessDialog()方法用來創(chuàng)建一個顯示HTML內(nèi)容的非模態(tài)對話框。

          使用方法:
          vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])
          vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures])

          參數(shù)說明:
          sURL--
          必選參數(shù),類型:字符串。用來指定對話框要顯示的文檔的URL。
          vArguments--
          可選參數(shù),類型:變體。用來向?qū)υ捒騻鬟f參數(shù)。傳遞的參數(shù)類型不限,包括數(shù)組等。對話框通過window.dialogArguments來取得傳遞進(jìn)來的參數(shù)。
          sFeatures--
          可選參數(shù),類型:字符串。用來描述對話框的外觀等信息,可以使用以下的一個或幾個,用分號“;”隔開。
          1.dialogHeight :對話框高度,不小于100px,IE4中dialogHeight 和 dialogWidth 默認(rèn)的單位是em,而IE5中是px,為方便其見,在定義modal方式的對話框時,用px做單位。
          2.dialogWidth: 對話框?qū)挾取?
          3.dialogLeft: 離屏幕左的距離。
          4.dialogTop: 離屏幕上的距離。
          5.center: {yes | no | 1 | 0 }:窗口是否居中,默認(rèn)yes,但仍可以指定高度和寬度。
          6.help: {yes | no | 1 | 0 }:是否顯示幫助按鈕,默認(rèn)yes。
          7.resizable: {yes | no | 1 | 0 } [IE5+]:是否可被改變大小。默認(rèn)no。
          8.status: {yes | no | 1 | 0 } [IE5+]:是否顯示狀態(tài)欄。默認(rèn)為yes[ Modeless]或no[Modal]。
          9.scroll:{ yes | no | 1 | 0 | on | off }:指明對話框是否顯示滾動條。默認(rèn)為yes。
          下面幾個屬性是用在HTA中的,在一般的網(wǎng)頁中一般不使用。
          10.dialogHide:{ yes | no | 1 | 0 | on | off }:在打印或者打印預(yù)覽時對話框是否隱藏。默認(rèn)為no。
          11.edge:{ sunken | raised }:指明對話框的邊框樣式。默認(rèn)為raised。
          12.unadorned:{ yes | no | 1 | 0 | on | off }:默認(rèn)為no。

          參數(shù)傳遞:
          1.要想對話框傳遞參數(shù),是通過vArguments來進(jìn)行傳遞的。類型不限制,對于字符串類型,最大為4096個字符。也可以傳遞對象,例如:
          -------------------------------
          parent.htm
          <script>
          var obj = new Object();
          obj.name="51js";
          window.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px");
          </script>
          modal.htm
          <script>
          var obj = window.dialogArguments
          alert("您傳遞的參數(shù)為:" + obj.name)
          </script>
          -------------------------------
          2.可以通過window.returnValue向打開對話框的窗口返回信息,當(dāng)然也可以是對象。例如:
          ------------------------------
          parent.htm
          <script>
          str =window.showModalDialog("modal.htm",,"dialogWidth=200px;dialogHeight=100px");
          alert(str);
          </script>
          modal.htm
          <script>
          window.returnValue="http://www.web3.cn";
          </script>

          posted on 2007-04-29 12:18 強(qiáng)強(qiáng) 閱讀(411) 評論(0)  編輯  收藏 所屬分類: web技巧

          主站蜘蛛池模板: 建水县| 盐亭县| 瑞丽市| 常山县| 信阳市| 石阡县| 宿州市| 长泰县| 简阳市| 富民县| 西充县| 鄂尔多斯市| 陇川县| 靖远县| 古浪县| 铁岭县| 东辽县| 临颍县| 浠水县| 都江堰市| 洪江市| 资阳市| 谷城县| 涡阳县| 敖汉旗| 丹寨县| 益阳市| 巫山县| 辛集市| 科尔| 亳州市| 林西县| 新安县| 余庆县| 四子王旗| 长宁县| 贡嘎县| 吐鲁番市| 南充市| 志丹县| 合水县|