Window.open()方法參數詳解

最後更新：2018-12-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

1, 最基本的快顯視窗代碼

window.open('page.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')   //該句寫成一行代碼
   參數解釋：
      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為允許；

3, 用函數控制快顯視窗
    下面是一段完整的代碼
      <html>
　　<head>
　　<script LANGUAGE="JavaScript">
　　
　　</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, 彈出兩個視窗
    對代碼稍微改動如下：
   　<script LANGUAGE="JavaScript">
　　
　　</script>
      為避免彈出的2個視窗覆蓋，用top和left控制一下彈出的位置不要相互覆蓋即可。最後用上面的說過的四種方法調用即可。
      注意：2個視窗的name(newwindow與 newwindow2)不要相同，或者乾脆全部為空白。

5, 主視窗開啟檔案1.htm，同時彈出小視窗page.html
    如下代碼加入主視窗<head>區：
    function openwin()
    {
     window.open("page.html","","width=200,height=200")
    }
    加入body區：
    <a href="1.htm" onclick="openwin()">open</a>即可。

6, 彈出的視窗之定時關閉控制
    將一小段代碼加入彈出的頁面（注意是加入page.html的HTML中，可不是首頁面中，否則......），讓它在10秒後自動關閉是不是更酷了？
    function closeit()
    {
    setTimeout("selft.close()", 10000)   //毫秒
    }
    然後，在body 中添加：<body onload="closeit()">即可。

7, 在快顯視窗中加上一個關閉按扭
<input type="button" value="關閉" onclick="window.close()">

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控制
    回想一下，上面的快顯視窗雖然酷，但是有一點小毛病，比如你將上面的指令碼放在一個需要頻繁經過的頁面裡（例如首頁），那麼每次重新整理這個頁面，視窗都會彈出一次，是不是非常煩人？
    有解決的辦法嗎？我們使用cookie來控制即可。
    首先，將如下代碼加入首頁面的Html的head區：
　 function openwin(){
　　window.open("page.html","","width=200,height=200")
　　}
      function get_cookie(Name)
      {
       var search=Name+"=";
       var returnvalue="";
       if(document.cookie.length>0){
　　    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 ladpopup()
      {
      if(get_cookie('popped=yes'))
      {
      openwin()
      document.cookie="popped=yes";
      }
      }
     最後，用<body onload="loadpopup()">

寫到這裡快顯視窗的製作和應用技巧基本上算是完成了！

摘自網路

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

Window.open()方法參數詳解

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support