主页面与iframe子页面互相传值

最新推荐文章于 2024-07-19 16:10:40 发布

追寻

最新推荐文章于 2024-07-19 16:10:40 发布

阅读量1.3w

点赞数 1

分类专栏： web前端

本文链接：https://blog.csdn.net/wwww1988600/article/details/8814510

版权

web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

有web开发中，有时候，我们会遇上这样的问题：在主页面弹出一个iframe子页面，将主页面中数据传到iframe子页面

具体的实现请看以下代码：

主页面代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <title></title>  
    <script src="../临时文档/jquery1.4.2.js" type="text/javascript"></script>  
    <script type="text/javascript">  
        function openWindow() {  
            var oldValue = { Name:$("#Name").val(),Age:$("#Age").val() };  
            var result = popModal("main1.html", 300, 200, oldValue);  
            if (result!=null && typeof (result) != "undefined") {  
                $("#Name").val(result.Name);  
                $("#Age").val(result.Age);  
            }  
        }  
        //输入参数: 路径,宽度,高度,参数(可选)  
        function popModal(url, width, height, parameter ) {  
            var feature = 'dialogWidth=' + width+'px'  
        + ';dialogHeight=' + height + 'px'  
        + ';dialogTop=' + (screen.height - height) / 2 + 'px'  
        + ';dialogLeft=' + (screen.width - width) / 2 + 'px'  
        + ';help:no;resizable:no;status=no;scroll:no';  
            if(typeof(parameter)=="undefined")  
                return window.showModalDialog(url, feature);  
            else  
                return window.showModalDialog(url, parameter, feature);  
        }  
  
        //=====================================================================  
        //功能说明: 弹出一个窗口  
        //输入参数: 路径,窗口名称,宽度,高度  
        function pop(helpurl, windowName, width, height) {  
            var feature ='width=' + width   
                + ',height=' + height  
                + ',top=' + (screen.height - height) / 2  
                + ',left=' + (screen.width - width) / 2  
                +',toolbar=no,menubar=no,scrollbars=yes,resizable=no,location=no,status=no';  
            window.open(helpurl, windowName, feature);  
        }  
 </script>  
</head>  
<body>  
    <div>  
        名字<input id="Name" type="text" /><br />  
        年龄<input id="Age" type="text" /><br />  
        <input id="Button1" type="button" value="打开模式窗口" οnclick="openWindow()" />  
    </div>  
</body>  
</html>

子页图代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <title></title>  
    <script src="../临时文档/jquery1.4.2.js" type="text/javascript"></script>  
    <script type="text/javascript">  
        $(function () {  
            var param = window.dialogArguments;  
            $("#Name").val(param.Name);  
            $("#Age").val(param.Age);  
        });  
        function closeWindow() {  
            var result = {};  
            result.Name = $("#Name").val();  
            result.Age = $("#Age").val();  
            window.returnValue = result;  
            window.close();  
        }  
    </script>  
</head>  
<body>  
    <div>  
        名字<input id="Name" type="text" /><br />  
        年龄<input id="Age" type="text" /><br />  
        <input id="Button1" type="button" value="关闭模式窗口" οnclick="closeWindow()" />  
    </div>  
</body>  
</html>

实现效果如图所示：