使用iframe标签，子窗体与父窗体之间相互调用js函数

最新推荐文章于 2021-08-05 19:20:52 发布

原创最新推荐文章于 2021-08-05 19:20:52 发布 · 954 阅读

0 ·

CC 4.0 BY-SA版权

jquery 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个关于主窗体与子窗体之间互相调用函数的例子，展示了如何使用JavaScript实现不同窗体间的交互。具体包括：主窗体如何调用子窗体中的函数提交表单，以及子窗体如何回调主窗体中的函数来关闭对话框并刷新表格。

现在假设主窗体中有以下脚本

    <div id="editDialogDiv">
        <iframe id="editFrame" src="**.aspx" frameborder="0" width="100%" height="100%" scrolling="no"></iframe>
    </div>

<script type="text/javascript">

       $("#editFrame")[0].contentWindow.submitForm(); //主窗体中调用子窗体中的函数


        function afterEditSuccess() {
            $("#editDialogDiv").dialog("close");
            initTable();
        }

    </script>

子窗体**.aspx页面中的脚本如下

    <script type="text/javascript">
        function afterEdit(data) {
              if (data == "ok") {
                  window.parent.window.afterEditSuccess();  //子窗体调用父窗体中的函数
              } else {
                  alert("败了");
              }
        }

        function submitForm() {
            $("form").submit();
        }
    </script>