zoukankan      html  css  js  c++  java
  • js中的showModalDialog的实战应用


    IE提供的showModalDialog()方法是一个很好用的Web应用功能,虽然一般的网站应用不是很常见,但一旦涉及到企业应用级的Web开发则就很有用了。现在我用一个简单易懂的例子来说明一下:

    这一应用需要两个web文件:

    1、父窗口(也即用来控制弹出窗口的那个页面)
    showModalDialog.html
    ---------------------------------------------------------------------------------------


    <html>
    <head>
    <title>showModalDialog</title>
    <script language="JavaScript">
    <!--
    //aInfo
    作为数组对象,将被showModalDialog传递出去
    //
    也可用var oMyobject=new Object();
    //oMyobject.firstProperty = value; oMyobject.lastProperty = value;
    的方式定义一个对象(firstProperty,lastProperty是自己按需定义的对象属性,可是任意取名并赋值)
    var aInfo   = new Array(3);
    aInfo[0] = "aaaaaaaaaaa";
    aInfo[1] = "bbbbbbbbbbb";
    aInfo[2] = "ccccccccccc";
    var url = "dialog.html";
    var sFeatures ="dialogWidth=500px;dialogHeight=500px;dialogLeft=0;dialogTop=0;";
    /*sFeatures
    的各项可选参数:
    *dialogWidth:
    弹出窗口的宽度;
    *dialogHeight:
    弹出窗口的高度;
    *dialogLeft:
    弹出窗口的左边距
    *dialogTop:
    *edge:sunken | raised
    *center: yes|no|1|0|on|off
    *dialogHide: yes|no|1|0|on|off
    *help: yes|no|1|0|on|off
    *resizable: yes|no|1|0|on|off
    *scroll: yes|no|1|0|on|off
    *status: yes|no|1|0|on|off
    *unadorned: yes|no|1|0|on|off
    */

    functionshowDialog(){
    //
    弹出一个showModalDialog,并以returnValue来获取返回值
    var returnValue = window.showModalDialog(url,aInfo,sFeatures);
    if(returnValue!=null){
       //for(var i=0;i<returnValue.length;i++){
        //document.all.info.innerHTML =returnValue[i]+"<br>";
       //}
       //
    输出返回值
       document.all.info.innerHTML=returnValue;
    }
    //

    }
    //-->
    </script>
    </head>

    <body>
    <h3><a href="#" onclick="showDialog()">
    打开Dialog窗口</a></h3>
    <div id="info"></div>
    </body>
    </html>


    2
    、子窗口(即将被弹出的那个页面)
    dialog.html
    -----------------------------------------------------------------------------------------


    <html>
    <head>
    <title>Dialog</title>
    </head>

    <body>
    <script language="JavaScript">
    <!--
    //
    获取父窗口传来的对象(本例中就是父页面中的“oInfo”数组对象,也可用“window”对象,以便对父页面进行操作。总之,只要是object类型就成。)
    var args = window.dialogArguments;
    if(args!=null){
    //document.write(args);
    for(var i=0;i<args.length;i++){
       document.writeln(args[i]+" "+(i+1)*10);
    }
    }else{
    document.writeln("
    对不起,参数为空");
    }
    //
    向父窗口返回的值
    window.returnValue = "
    这是子窗口返回来的值";
    //-->
    </script>
    </body>
    </html>

    --------------------------------------------------------------------

    好了,运行showModalDialog.html即可看出其中的端倪来了。。。

    通过这些工作,我实现了将值在父页面和子页面中的相互传递和处理。我想这也正是ms设计showModalDialog()方法的初衷之所在吧。当然,这个例子太简单了。但我的目的只是通过它了解showModalDialog的执行机制。实际应用中需要举一反三才行呢。(完

  • 相关阅读:
    UVa OJ 148 Anagram checker (回文构词检测)
    UVa OJ 134 LoglanA Logical Language (Loglan逻辑语言)
    平面内两条线段的位置关系(相交)判定与交点求解
    UVa OJ 130 Roman Roulette (罗马轮盘赌)
    UVa OJ 135 No Rectangles (没有矩形)
    混合函数继承方式构造函数
    html5基础(第一天)
    js中substr,substring,indexOf,lastIndexOf,split等的用法
    css的textindent属性实现段落第一行缩进
    普通的css普通的描边字
  • 原文地址:https://www.cnblogs.com/liaoshiyong/p/3150881.html
Copyright © 2011-2022 走看看