Window.Open詳解

          Window.Open詳解

          Window.Open詳解

          一、window.open()支持環境:
          JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+

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

          三、示例:
          <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>


            腳本運行后,page.html將在新窗體newwindow中打開,寬為100,高為400,距屏頂0象素,屏左0象素,無工具條,無菜單條,無滾動條,不可調整大小,無地址欄,無狀態欄。請對照。
            上例中涉及的為常用的幾個參數,除此以外還有很多其他參數,請見四。

          四、各項參數
            其中yes/no也可使用1/0;pixel?value為具體的數值,單位象素。

          參數?|?取值范圍?|?說明?

          alwaysLowered?|?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?|?窗口距屏幕上邊界的像素長度?
          scrollbars?|?yes/no?|?窗口是否可有滾動欄?
          titlebar?|?yes/no?|?窗口題目欄是否可見?
          toolbar?|?yes/no?|?窗口工具欄是否可見?
          Width?|?pixel?value?|?窗口的像素寬度?
          z-look?|?yes/no?|?窗口被激活后是否浮在其它窗口之上

          =====================================================

          【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腳本中的的大小寫最好前后保持一致。

          posted on 2006-12-27 03:00 Tom 閱讀(188) 評論(0)  編輯  收藏 所屬分類: JavaScript

          <2006年12月>
          262728293012
          3456789
          10111213141516
          17181920212223
          24252627282930
          31123456

          導航

          統計

          常用鏈接

          留言簿(1)

          隨筆分類(42)

          隨筆檔案(43)

          文章分類

          相冊

          搜索

          最新評論

          閱讀排行榜

          評論排行榜

          主站蜘蛛池模板: 万宁市| 翼城县| 吉林省| 桓仁| 蓬莱市| 泾阳县| 灵璧县| 辉县市| 高淳县| 虎林市| 阜城县| 皮山县| 海口市| 化州市| 祁门县| 若羌县| 眉山市| 乌拉特后旗| 朔州市| 库车县| 嫩江县| 合阳县| 鸡泽县| 揭西县| 元谋县| 如东县| 湘潭县| 雷山县| 白水县| 时尚| 乌拉特前旗| 麟游县| 张掖市| 志丹县| 崇信县| 汝南县| 宝丰县| 高清| 绥江县| 郧西县| 视频|