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>

原文地址:https://www.cnblogs.com/AndyGe/p/1590362.html