随笔-3  评论-26  文章-41  trackbacks-0
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>
posted on 2008-03-14 10:51 百年 阅读(585) 评论(0)  编辑  收藏 所属分类: Javascript Article

只有注册用户登录后才能发表评论。
网站导航:
 
Powered by: 博客园 模板提供：沪江博客 Copyright ©2024 百年