JavaScript Window 開啟新視窗的幾種方式

1、方式1:window.location.href

window.location.href="https://www.cnblogs.com/guorongtao/";     //在當前視窗中開啟視窗
類似於HTML:
<a href="https://www.cnblogs.com/guorongtao/" title="測試1">Welcome Test1</a>

2、方式2:window.open

window.open("https://www.cnblogs.com/guorongtao/");      //在另外新建視窗中開啟視窗
類似於HTEL:
<a href="https://www.cnblogs.com/guorongtao/" 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、方式3window.showModalDialog (部分瀏覽器不支援)

var URL='https://www.cnblogs.com/guorongtao'
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，ＩＥ４中dialogHeight 和 dialogWidth 預設的單位是em，而ＩＥ５中是px，為方便其見，在定義modal方式的對話方塊時，用px做單位。
• dialogWidth: //對話方塊寬度。
• dialogLeft: //距離桌面左的距離。
• dialogTop: //離桌面上的距離。
• center: {yes | no | 1 | 0 }：//視窗是否居中，預設yes，但仍可以指定高度和寬度。
• help: {yes | no | 1 | 0 }：//是否顯示幫助按鈕，預設yes。
• resizable: {yes | no | 1 | 0 } ［ＩＥ５＋］：//是否可被改變大小。預設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() -重新調整當前視窗

建立時間：2020.11.20　　更新時間：