window.open()參數詳解及對瀏覽器的兼容性


       因為篇幅,window.open()瀏覽器的兼容性請點擊 這里

Part1:參數詳解

  window.open(url,name,param)

  url:即將打開的子窗口的地址;比如 "http://www.baidu.com"  http:// 這段是必須要的,否則找不到頁面,那么打開的子頁面可能還是父頁面。或者相對路徑 ../

  name:子窗口的句柄;就相當於是子窗口的一個名字,可以自定義。窗口的句柄

  param:子窗口的一些參數,使用“ , ”進行分隔;

    param可選參數

    注:以下參數可能要配合使用,單獨使用某些參數可能不起作用,配合規則后續補充,看客們在使用時,請注意實現效果

    (其中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 |     窗口工具欄是否可見     (默認no;當為yes是和父窗口在同一個標簽中打開,不會再打開新標簽)
    Width        | pixel value |   窗口的像素寬度 
    z-look          | yes/no |     窗口被激活后是否浮在其它窗口之上

Part2:應用實例

  1.打開一個進行基礎設置過的窗口

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') 

  2.使用函數控制窗口的彈出 

function openwin() {
    window.open ("page.html", "newwindow", "height=100, width=400, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")
}
//瀏覽器在讀取頁面之前調用函數打開窗口
<body onload="openwin()"> 
…任意的頁面內容… 
</body>
//瀏覽器離開當前頁面時,打開新窗口(已知不支持谷歌、Opera瀏覽器)。onunload事件見這里
<body onunload="openwin()"> 
…任意的頁面內容… 
</body>  

其他的還可以通過按鈕點擊、a標簽等觸發。

   3.同時彈出兩個窗口

<script>
    function openwin() {
        window.open("http://www.baidu.com","new1","height=100, width=400")
     window.open("https://www.cnblogs.com/","new1","height=100, width=400")
  }
</script>

  注意:上面兩個窗口的大小和位置因為相同,會出現重疊。

  注意2:兩個窗口的name不能相同

  4.通過a標簽實現在打開一個窗口的同時,打開另一個小窗口

<script>
    function openwin() {
        window.open("http://www.baidu.com","new1","height=100, width=400")
    } 
</script>
<body>
  <a href="https://www.cnblogs.com/" onclick="openwin()">點擊打開博客園</a> 
</body>

  注意:在打開大窗口之后,小窗口會被覆蓋掉,所以不要覺得小窗口沒了哦。

  注意2:按照這種邏輯,其實可以通知打開多個小窗口的,只要在 openwin 函數里添加多個 window.open() 就ok了。

  5.可以通過定時器關閉窗口

  注意:上面都是直接連接到已有的網站,這里是要在自己的網頁代碼里加內容

<script language="JavaScript"> 
    function closeit() {
        setTimeout("self.close()",10000) //毫秒
    } 
</script>    

  通過定時器控制顯示的時長,使用 self.close() 函數控制自身的關閉  點這里看定時器的用法


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM