中信-典型的父子窗体事件机制

 

showModalDialog子窗体:

<html>

<head>

<title>showModalDialog</title>
   
<script language="javascript" type="text/javascript">
       
        //获取父窗体传递的数据
    var array = window.dialogArguments; //模式对话框调用自己的dialogArguments属性获取从父窗体传过来的对象
   
        alert( 'showModal:'+array.length );
       
        var w = dialogArguments;//代表的就是父窗体对象
       
        function close2(){
           
            w.document.body.bgColor = "blue";
           
            var result = "success";
           
            //returnValue:返回数据给父窗体
            window.returnValue = result;
           
            window.close();//关闭当前窗体
        }
</script>
</head>
   
<body>
        <center>
            showModalDialog
            <hr/>
            <button onClick="close2()">close</button>
            <!--<a href="javascript:close2()">close</a>-->
        </center>
</body>

</html>
 

 

打开showModalDialog的父窗体:

<html>

<head>

<title>open,showModalDialog</title>
<script language="javascript" type="text/javascript">
       
       
        //open  1:url  2:名字  3:样式
        function open2(){
       
            window.open( "obj.html","obj","width:200px;height:300px" );
       
        }
       
        //showModalDialog 1:url 2:传递参数  3:样式    父窗体可以传递参数给showModalDialog, 模式窗体也可以返回数据给父窗体 (可以简化html开发。
        //降低页面的复杂度)
        function showModal(){
           
            var array = [ 1,"abc",2 ];
           
            var result = showModalDialog( "showModalDialog.html",window,"dialogwidth:500px;dialogheight:500px" );//弹出模式对话框,并接收它的返回的结果
       
            alert( 'result:'+result );//输出从子窗口返回的结果
        }
        
</script>
</head>

<body>
        <center>
            <a href="javascript:open2()">open obj.html</a>
            <hr>
            <a href="javascript:showModal()">showModal</a>
        </center>
</body>

</html>
 

 

 

注:

  在父窗体中首先有一个超级链接事件用于打开子窗体showModaldialog,并将window对象传递给了子窗体。在子窗体中改变了父窗体的颜色,最后并也返回了一个字符串对象给父窗体,父窗体收到返回的字符串后将其以对话框的形式输出来。

 

 

你可能感兴趣的:(JavaScript,js,Web,职场,休闲)