因為篇幅,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() 函數控制自身的關閉 點這里看定時器的用法