JavaScript Window 打开新窗口的几种方式 window.location.href、window.open、window.showModalDialog


1、方式1: window.location.href

  1.  

    window.location.href=”https://www.cnblogs.com/guorongtao/”;     //在当前窗口中打开窗口

  2.  
     
  3.  

    类似于HTML:

  4.  
     
  5.  

    <a href=”https://www.cnblogs.com/guorongtao/” title=”测试1″>Welcome Test1</a>

 2、方式2: window.open

  1.  

    window.open(“https://www.cnblogs.com/guorongtao/”);      //在另外新建窗口中打开窗口

  2.  
     
  3.  

    类似于HTEL:

  4.  
     
  5.  

    <a href=”https://www.cnblogs.com/guorongtao/” title=”测试2″ target=”_blank”>Welcome Test2</a>

指定参数:

  1.  

    <script >

  2.  
     
  3.  

      var NewUrl = ‘www.baidu.com’ ;      

  4.  
     
  5.  

      window.open(NewUrl,’newindow’,’height=600,width=900,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no’);

  6.  
     
  7.  

    </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 (部分浏览器不支持)

  1. var URL=’https://www.cnblogs.com/guorongtao’

  2. 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个字符。也可以传递对象,例如:

  1.  

    //test1.htm

  2.  

    <script>

  3.  

    var mxh1 = new Array(“mxh”,”net_lover”,”孟子E章”)

  4.  

    var mxh2 = window.open(“about:blank”,”window_mxh”)

  5.  

    // 向对话框传递数组

  6.  

    window.showModalDialog(“test2.htm”,mxh1)

  7.  

    // 向对话框传递window对象

  8.  

    window.showModalDialog(“test3.htm”,mxh2)

  9.  

    </script>

  10.  
     
  11.  

    //test2.htm

  12.  

    <script>

  13.  

    var a = window.dialogArguments

  14.  

    alert(“您传递的参数为:” + a)

  15.  

    </script>

  16.  
     
  17.  

    //test3.htm

  18.  

    <script>

  19.  

    var a = window.dialogArguments

  20.  

    alert(“您传递的参数为window对象,名称:” + a.name)

  21.  

    </script>

可以通过window.returnValue向打开对话框的窗口返回信息,当然也可以是对象。例如:

  1.  

    //test4.htm

  2.  

    <script>

  3.  

    var a = window.showModalDialog(“test5.htm”)

  4.  

    for(i=0;i<a.length;i++) alert(a[i])

  5.  

    </script>

  6.  
     
  7.  

    //test5.htm

  8.  

    <script>

  9.  

    function sendTo()

  10.  

    {

  11.  

    var a=new Array(“a”,”b”)

  12.  

    window.returnValue = a

  13.  

    window.close()

  14.  

    }

  15.  

    </script>

  16.  
     
  17.  

    <form>

  18.  

    <input value=”返回” type=button onclick=”sendTo()”>

  19.  

    </form>

4、Window 其他参考 

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

 

 

原创文章,作者:kirin,如若转载,请注明出处:https://blog.ytso.com/244257.html

(0)
上一篇 2022年4月16日
下一篇 2022年4月16日

相关推荐

发表回复

登录后才能评论