JavaScript打开新窗口的几种方式-Toy模板网

这篇具有很好参考价值的文章主要介绍了JavaScript打开新窗口的几种方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() -移动当前窗口
window.resizeTo() -重新调整当前窗口

window.location.href

window.location.href="https://www.cnblogs.com/guorongtao/";     //在当前窗口中打开窗口
类似于HTML:
<a href="https://www.cnblogs.com/guorongtao/" title="测试1">Welcome Test1</a>

window.open
```
window.open("https://www.cnblogs.com/guorongtao/");      //在另外新建窗口中打开窗口
类似于HTEL:
<a href="https://www.cnblogs.com/guorongtao/" title="测试2" target="_blank">Welcome Test2</a>
```
- 指定参数
```
window.open('http://example.com', '_blank', {
  headers: {
    Authorization: 'Bearer <token>'
  }
});
```
```
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');
```
  - NewUrl //’ 弹出窗口的地址；
  - ‘newwindow’ //弹出窗口的名字，非必须，可用空’'代替；
  - height=600 //窗口高度；
  - width=900 //窗口宽度；
  - top=0 //窗口距离屏幕上方的象素值；
  - left=0 //窗口距离屏幕左侧的象素值；
  - toolbar=no //是否显示工具栏，yes为显示；
  - menubar，scrollbars //表示菜单栏和滚动栏。
  - resizable=no //是否允许改变窗口大小，yes为允许；
  - location=no //是否显示地址栏，yes为允许；
  - status=no //是否显示状态栏内的信息，yes为允许；
window.showModalDialog

部分浏览器不支持
```
var URL='https://www.cnblogs.com/guorongtao'
window.showModalDialog(URL,'','DialogLeft:170px;DialogTop:130px;DialogWidth:930px;DialogHeight:753px;status:no;help:no');
```
- 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。
传入参数
```
//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向打开对话框的窗口返回信息，也可以是对象文章来源地址https://www.toymoban.com/news/detail-623925.html
```
//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>
```