ShowModalDialog方法的参数传递研究

利用vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])，我们可以打开一个模态窗口，该窗口的优点是限制用户只能对当前的页面进行操作，而对其父页面不能进行操作，常用于向导或者信息获 取页面。

利用其中的vArguments我们可以在父页面和弹出的页面中进行参数的传递，参数可以为自定义的对象，也可以传递父页面中任何一个控件的引用，这使得我们可以很容易的来操作父页面中的各个元素，使得参数的传递变得非常容易。

1.     自定义对象参数传递

我们可以定义一个javascript对象，然后定义各种自定义属性的值，然后可以将此对象传递到子页面中。如：

父页面sender.htm源代码为：

< html >

 

< script >

function show()

{

     var person = new Object();

     person.myName=myName.value;

     person.age = age.value;

     person.country = country.value;

     window.showModalDialog("target.htm" ,person,"" );

}

</ script >

 

< body >

    < table >

        < tr >

            < td >

                name:</ td >

            < td >

                < input id ="myName"></ td >

        </ tr >

        < tr >

            < td >

                age:</ td >

            < td >

                < input id ="age"></ td >

        </ tr >

        < tr >

            < td >

                country:</ td >

            < td >

                < input id ="country"></ td >

        </ tr >

    </ table >

    < br >

    < input type ="button" value ="open" onclick ="show()">

</ body >

</ html >

 

弹出的子页面target.htm的源代码为：

 

< html >

< body >

    < table >

        < tr >

            < td >

                name:</ td >

            < td id ="myName">

            </ td >

        </ tr >

        < tr >

            < td >

                age:</ td >

            < td id ="age">

            </ td >

        </ tr >

        < tr >

            < td >

                country:</ td >

            < td id ="country">

            </ td >

        </ tr >

    </ table >

</ body >

 

< script >

    var person = window.dialogArguments;

    myName.innerText = person.myName;

    age.innerText = person.age;

    country.innerText = person.country;

</ script >

 

</ html >

 

上述的代码可以将父页面的信息封装成一个对象，然后将该对象传递给子页面。

 

 

2.     父页面元素传递

我们可以将父页面中元素对象的引用传递给子页面，通过该引用我们可以访问父页面中的该元素对象。

Sender.htm源代码：

 

< html >

 

< script >

function show()

{

     window.showModalDialog("target.htm" ,infoDiv,"" );

}

</ script >

 

< body >

    < div id ="infoDiv">

        < table id ="infoTable">

            < tr >

                < td >

                    name:</ td >

                < td >

                    < input id ="myName"></ td >

            </ tr >

            < tr >

                < td >

                    age:</ td >

                < td >

                    < input id ="age"></ td >

            </ tr >

            < tr >

                < td >

                    country:</ td >

                < td >

                    < input id ="country"></ td >

            </ tr >

        </ table >

    </ div >

    < br >

    < input type ="button" value ="conveyElement" onclick ="show()">

</ body >

</ html >

Target.htm源代码：

//其中利用元素对象的引用我们可以操纵父页面的元素对象的属性。

 

< html >

< body >

    < div id ="childDiv">

    </ div >

 

    < script >

     var infoDiv = window.dialogArguments;

    </ script >

 

    < br >

    < input type ="button" value ="showInnerHtml" onclick ='childDiv.innerHTML=infoDiv.innerHTML'>

    < br >

    < input type ="button" value ="changePColor" onclick ='infoDiv.style.backgroundColor="lightgreen"'>

</ body >

</ html >