背景
最近在项目中使用到JavaScript中Window 打开新窗口;
先将JavaScript中Window 打开新窗口的几种方式(window.location.href、window.open、window.showModalDialog)进行知识小结备份;
实例说明
方式1
方式1: window.location.href
window.location.href="https://www.cnblogs.com/guorongtao/"; //在当前窗口中打开窗口 类似于HTML: Welcome Test1
方式2
方式2: window.open
指定参数
window.open("https://www.cnblogs.com/guorongtao/"); //在另外新建窗口中打开窗口 类似于HTEL: Welcome Test2
参数说明
- 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.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,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 //test2.htm //test3.htm
可以通过window.returnValue向打开对话框的窗口返回信息,当然也可以是对象。例如:
//test4.htm
Window 其他参考
- window.open() - 打开新窗口
- window.close() - 关闭当前窗口
- window.moveTo() -移动当前窗口
- window.resizeTo() -重新调整当前窗口
参考
部分资料参考W3SCHOOL、MDN