• Js 弹出框 返回值的两种常用方法


    1.window.showModalDialog(url,args,dialogattrs)
    参数说明:
    url:弹出页面地址
    agrs:主窗口传给对话框的参数,可以是任意类型(数组也可以)
    dialogattrs:弹出窗口的样式参数

    模式对话框用法:
    主窗口:var value =window.showModalDialog('test.jsp',strs,'resizable:yes');
    弹出框中通过window.returnValue来设置返回值,上面的value拿到的就是这个值,然后主窗口中可以对

    这个值进行处理,实现交互处理
    注:模式对话框的应用就在于它的返回值,可以返回简单字符窜,也可以返回数组,非模式对话框类似

    参数说明:

    vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])
    sURL--必选参数,类型:字符串。用来指定对话框要显示的文档的URL。
    vArguments--可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。
    sFeatures--可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。
    1.dialogHeight :对话框高度,不小于100px,IE4中dialogHeight 和 dialogWidth 默认的单位是em,而IE5中是px,为方便其见,在定义modal方式的对话框时,用px做单位。
    2.dialogWidth: 对话框宽度。
    3.dialogLeft: 离屏幕左的距离。
    4.dialogTop: 离屏幕上的距离。
    5.center: {yes | no | 1 | 0 }:窗口是否居中,默认yes,但仍可以指定高度和宽度。
    6.help: {yes | no | 1 | 0 }:是否显示帮助按钮,默认yes。
    7.resizable: {yes | no | 1 | 0 } [IE5+]:是否可被改变大小。默认no。
    8.status: {yes | no | 1 | 0 } [IE5+]:是否显示状态栏。默认为yes[ Modeless]或no[Modal]。
    9.scroll:{ yes | no | 1 | 0 | on | off }:指明对话框是否显示滚动条。默认为yes。
    下面几个属性是用在HTA中的,在一般的网页中一般不使用。
    10.dialogHide:{ yes | no | 1 | 0 | on | off }:在打印或者打印预览时对话框是否隐藏。默认为no。
    11.edge:{ sunken | raised }:指明对话框的边框样式。默认为raised。
    12.unadorned:{ yes | no | 1 | 0 | on | off }:默认为no。

    参数传递:
    要想对话框传递参数,是通过vArguments来进行传递的。类型不限制,对于字符串类型,最大为4096个字符。也可以传递对象

    实例:

    父窗口关键代码:

    <script language="javascript">
    function onObjMore() {
     var feature = "dialogWidth:"+400+"px;dialogHeight:"+400+"px;scroll:yes;status:no;help:no;center:1";
     var returnTarget = window.showModalDialog("alert.html", "", feature);
     if(returnTarget != undefined && returnTarget.length > 1) {

      $("#lb").text(returnTarget);

     }
     return false;
    }
    </script>

    <body>
                <p>
                  <input type="button" name="leftbtn" id="leftbtn" value="上按钮" onclick="onObjMore();" />
    </p>
                <p>
         <label id="lb">测试</label>
    </p>
    </body>

    子窗口 返回值,也可以再弹出子窗口:

    <script language="javascript">

    function exit() {
    window.returnValue = "弹出窗口测试页返回值";
    window.close();
    }

    </script>

    <body>
    <input type="button" id="test" title="测试" onclick="exit();" value="关闭" />
    <input type="button" id="test" title="测试" onclick="onObjMore();" value="弹出" />
    </body>

    2。window.open:

    【父窗口】

    <script>
    function show_child()
    {
     var child=window .open("child.html","child","height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");
    /* if(!child.closed)
     {
      if(!window .close())
      {
         var   textValue   =   frm.txt.value;   parent.frm0.txt0.value   =   textValue;  

      }
      else
      {
       window .close();
       child.close();
      }
     }*/
    }
    </script>
    <a href="javascript:show_child();">打开子窗口</a>
    <form name=frm0>
    <input type="text" name="txt0" id="txt0"> //注意这里一定要写ID属性不然FF下取不到值
    </form>

      【子窗口】

    <script>
    function choseItem()
    {
     var v="";
     var check_item = document.frm.item;
     for(i=0;i<check_item.length;i++)
     {
      if(check_item[i].checked)
      {
       v+=","+check_item[i].value;
      }
      document.frm.txt.value=v.replace(/^,{1}/,"");  
     }
    }
    function foo()
    {
     window .close();
     window .opener.document.getElementById("txt0").value=document.getElementById("txt").value
    }
    </script>
    <body>
    <form name=frm>
    <input type=checkbox name=item value=1 onclick="choseItem();">a
    <input type=checkbox name=item value=2 onclick="choseItem();">b
    <input type=checkbox name=item value=3 onclick="choseItem();">c
    <input type=checkbox name=item value=4 onclick="choseItem();">d
    <input type=text name="txt" id="txt">
    </form>
    <input type=button value="关闭" onclick="foo();">
    </body>

  • 相关阅读:
    数据产品设计专题(2)- 数据产品设计方法论之框架体系
    数据产品设计专题(1)- 数据产品设计方法论之互联网思维
    数据仓库专题(23):总线矩阵的另类应用-Drill Down into a More Detailed Bus Matrix
    数据仓库专题(22):总线架构和维度建模优势-杂项
    数据仓库专题(21):Kimball总线矩阵说明-官方版
    胖子哥的大数据之路(17):重构-基于商业本质看互联网思维
    胖子哥的大数据之路(16):数据采集标准-我们到底需要什么样的数据?
    android开发实践之1:安装部署环境设置
    MVC模式
    访问者模式
  • 原文地址:https://www.cnblogs.com/sihai6b204/p/1920432.html
Copyright © 2020-2023  润新知