Question

我有一个页面可以在点击时打开一个jQuery对话框。该对话框在同一域的单独页面上包含iframed表单。在父页面上，我有以下代码：

<a class="popup" href="my_form.php">Open Popup</a>

<div id="pop-content" style="display:none;">
    <iframe id="pop-iframe" width="100%" height="100%"></iframe>
</div>

<script>
    $(document).ready(function() {
        $(".popup").click(function (e) {

            // pass the url from the link to the iframe
            $("#pop-iframe").attr('src', $(this).attr("href"));

            // Open the dialog 
            $("#pop-content").dialog({
                 width: 850,
                 height: 600,
                 show: true,
                 close: function (event, ui) {
                     $(this).dialog('destroy');
                 }
            });

            e.preventDefault();
        });
     });

    // Call this fucntion from the iframe after form submit
    function dialogClose() {          
        $('#pop-content').dialog('close');  // close the iframe      
        window.location.reload();  // reload the parent page
        return false;
    };
</script>

表单成功提交后，我需要关闭对话框并重新加载父页面。为此，在表单提交后，我使用PHP在页面上打印出以下JavaScript：

<script>
    $(function () {
        window.parent.parent.dialogClose();
    });
</script>

但是，函数dialogClose()未被执行。有人可以指出我正确的方向吗？

在my_form.php中使用此功能时，没有控制台错误：

window.parent.parent.dialogClose()

在my_form.php：

中使用此功能时

window.parent.dialogClose()

控制台记录：

TypeError：window.parent.dialogClose不是函数

Answer 1

原来很简单..

在iframed页面上，您只需要查找父对象，因为对话框本身是父页面的一部分

<script>
  $(function () {
      parent.dialogClose();
  });
</script>

并在父页面上（需要在页面上，出于某种原因不在单独的js文件中）

<script>
  function dialogClose() { 
    window.location.reload(); 
    $("#pop-content").dialog("destroy");      
  };
</script>

从iframe关闭jQuery Dialog

1 个答案: