JavaScript Window 打開新窗口(window.location.href、window.open、window.showModalDialog)
1、方式1: window.location.href
window.location.href="https://www.jb51.net"; //在當前窗口中打開窗口
類似於HTML:
<a href="https://www.jb51.net" title="測試1">Welcome Test1</a>
2、方式2: window.open
window.open("https://www.jb51.net"); //在另外新建窗口中打開窗口
類似於HTEL:
<a href="https://www.jb51.net" title="測試2" target="_blank">Welcome Test2</a>
指定參數:
<script > var NewUrl = 'www.baidu.com' ; window.open(NewUrl,'newindow','height=600,width=900,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no'); </script >
參數說明:
- NewUrl //' 彈出窗口的地址;
- 'newwindow' //彈出窗口的名字,非必須,可用空''代替;
- height=600 //窗口高度;
- width=900 //窗口寬度;
- top=0 //窗口距離屏幕上方的象素值;
- left=0 //窗口距離屏幕左側的象素值;
- toolbar=no //是否顯示工具欄,yes為顯示;
- menubar,scrollbars //表示菜單欄和滾動欄。
- resizable=no //是否允許改變窗口大小,yes為允許;
- location=no //是否顯示地址欄,yes為允許;
- status=no //是否顯示狀態欄內的信息,yes為允許;
3、方式3 window.showModalDialog (部分瀏覽器不支持)
var URL='https://www.jb51.net' window.showModalDialog(URL,'','DialogLeft:170px;DialogTop:130px;DialogWidth:930px;DialogHeight:753px;status:no;help:no');
原型:
vReturnValue = window.showModelessDialog(sURL [, vArguments] [, sFeatures])
參數說明:
- sURL //必選參數,類型:字符串。用來指定對話框要顯示的文檔的URL。
- vArguments //可選參數,類型:變體。用來向對話框傳遞參數。傳遞的參數類型不限,包括數組等。對話框通過window.dialogArguments來取得傳遞進來的參數。
- sFeatures //可選參數,類型:字符串。用來描述對話框的外觀等信息,可以使用以下的一個或幾個,用分號“;”隔開。
- dialogHeight// 對話框高度,不小於100px,IE4中dialogHeight 和 dialogWidth 默認的單位是em,而IE5中是px,為方便其見,在定義modal方式的對話框時,用px做單位。
- dialogWidth: //對話框寬度。
- dialogLeft: //距離桌面左的距離。
- dialogTop: //離桌面上的距離。
- center: {yes | no | 1 | 0 }://窗口是否居中,默認yes,但仍可以指定高度和寬度。
- help: {yes | no | 1 | 0 }://是否顯示幫助按鈕,默認yes。
- resizable: {yes | no | 1 | 0 } [IE5+]://是否可被改變大小。默認no。
- status: {yes | no | 1 | 0 } [IE5+]://是否顯示狀態欄。默認為yes[ Modeless]或no[Modal]。
- scroll:{ yes | no | 1 | 0 | on | off }://指明對話框是否顯示滾動條。默認為yes。
另外幾個屬性用在HTA中的,在一般的網頁中一般不使用。
- dialogHide:{ yes | no | 1 | 0 | on | off }://在打印或者打印預覽時對話框是否隱藏。默認為no。
- edge:{ sunken | raised }://指明對話框的邊框樣式。默認為raised。
- unadorned:{ yes | no | 1 | 0 | on | off }://默認為no。
傳入參數:
要想對話框傳遞參數,是通過vArguments來進行傳遞的。類型不限制,對於字符串類型,最大為4096個字符。也可以傳遞對象,例如:
//test1.htm <script> var mxh1 = new Array("mxh","net_lover","孟子E章") var mxh2 = window.open("about:blank","window_mxh") // 向對話框傳遞數組 window.showModalDialog("test2.htm",mxh1) // 向對話框傳遞window對象 window.showModalDialog("test3.htm",mxh2) </script> //test2.htm <script> var a = window.dialogArguments alert("您傳遞的參數為:" + a) </script> //test3.htm <script> var a = window.dialogArguments alert("您傳遞的參數為window對象,名稱:" + a.name) </script>
可以通過window.returnValue向打開對話框的窗口返回信息,當然也可以是對象。例如:
//test4.htm <script> var a = window.showModalDialog("test5.htm") for(i=0;i<a.length;i++) alert(a[i]) </script> //test5.htm <script> function sendTo() { var a=new Array("a","b") window.returnValue = a window.close() } </script> <form> <input value="返回" type=button onclick="sendTo()"> </form>
4、Window 其他參考
- window.open() – 打開新窗口
- window.close() – 關閉當前窗口
- window.moveTo() -移動當前窗口
- window.resizeTo() -重新調整當前窗口
到此這篇關於JavaScript Window 打開新窗口的三種方式的文章就介紹到這瞭,更多相關JavaScript Window 打開新窗口內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- 解決window.open()被瀏覽器攔截的問題
- vue路由跳轉打開新窗口(window.open())和關閉窗口(window.close())
- 關於React中使用window.print()出現頁面無響應問題解決記錄
- vue 集成騰訊地圖實現api(附DEMO)
- JavaScript中BOM,DOM和事件的用法詳解