JavaScript打开新窗口的几种方式

简介: JavaScript打开新窗口的几种方式
window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() -移动当前窗口
window.resizeTo() -重新调整当前窗口
  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>
  1. 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为允许;
  1. 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,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。
  1. 传入参数
//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>
  1. 通过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>


相关文章
|
6月前
|
JavaScript 前端开发 UED
JS:如何获取浏览器窗口尺寸?
JS:如何获取浏览器窗口尺寸?
244 1
|
5月前
|
JavaScript 前端开发 API
JavaScript基础-BOM与窗口交互
【6月更文挑战第12天】本文介绍了BOM(浏览器对象模型),它是JavaScript与浏览器交互的API。核心对象包括顶级对象window、document、location、navigator和history。常见问题涉及window全局作用域、location.href编码、history使用和navigator.userAgent检测。提供了代码示例,如设置页面标题、页面跳转及利用history实现无刷新跳转。掌握BOM基础和最佳实践对前端开发至关重要。
42 5
|
5月前
|
JavaScript 前端开发
js怎样获取浏览器窗口尺寸
js怎样获取浏览器窗口尺寸
|
6月前
|
JavaScript 前端开发
JavaScript 窗口
JavaScript 窗口
|
6月前
|
JavaScript 前端开发
js怎样获取浏览器窗口尺寸
js怎样获取浏览器窗口尺寸
58 1
|
6月前
|
JavaScript
js实现跨浏览器tab选项卡页通信、传参,监听localStorage.变量的实时变化,实现打开多个浏览器页面窗口相互可以传参通信
js实现跨浏览器tab选项卡页通信、传参,监听localStorage.变量的实时变化,实现打开多个浏览器页面窗口相互可以传参通信
|
JavaScript 前端开发
js怎样获取浏览器窗口尺寸
js怎样获取浏览器窗口尺寸
52 0
|
前端开发 JavaScript 安全
使用原生JavaScript对网页或窗口进行截图
要使用原生 JavaScript 对整个网页或窗口进行截图,你可以使用 html2canvas 库。 html2canvas 是一个强大的 JavaScript 库,可以将网页的可见部分渲染为 <canvas> 元素,并且可以保存为图像。
528 0
|
JSON JavaScript 前端开发
JavaScript iframe 多窗口通信实战
JavaScript iframe 多窗口通信实战
120 0
|
JavaScript 前端开发
获取屏幕、窗口和网页尺寸, 用JavaScript
本教程介绍了如何使用JavaScript获取屏幕、窗口和网页的尺寸。通过对不同尺寸的定义和访问方法进行解释,帮助读者更好地理解各种尺寸的含义和用途。
404 0