• 浅析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
    */

    function showDialog(){
    //弹出一个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的执行机制。实际应用中需要举一反三才行呢。(完)


    本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/birdme007/archive/2007/09/24/1798234.aspx

  • 相关阅读:
    个人笔记 给hover 伪类 恢复默认值
    vue 正则判断
    音乐播放器封装
    jq封装插件,简单dome
    功能齐全轮播
    vue 前端判断输入框不能输入0 空格。特殊符号。
    jq 下拉框
    IPC : 进程间通信方式
    内存
    const char* str 与char str[10]
  • 原文地址:https://www.cnblogs.com/scy251147/p/1849257.html
Copyright © 2020-2023  润新知