Question

要点：

使用jQuery UI对话框和动态创建的iFrame，是否可以从iFrame

中定义的按钮之一调用.dialog内的函数

详细信息：

我刚开始用jQuery和jQuery UI开始，我正在尝试将现有的应用程序转换为使用.dialog功能。

“内嵌弹出窗口”的previous plugin that I was using很好，但jQuery不能与它共存，因为它们都使用$()方法。我知道你可以avoid conflicts with other libraries，但我认为移动到jQuery lock-stock-and-barrel更容易，而不是让它们共存。

上一个插件的优点是能够将弹出窗口的内容指定为页面上的现有<div>，直接HTML代码或（最重要的是）我指向不同页面的URL。

This answer really helped me让最后一个能力发挥作用，这就是我现在拥有的......

$(document).ready(function () {
  var iframe = $('<iframe id="myFrame" width="100%" height="100%" frameborder="0" marginwidth="0" marginheight="0"></iframe>');
  var dialog = $('<div id="myDiv"></div>').append(iframe).appendTo("body").dialog({
    autoOpen: false,
    modal: true,
    resizable: true,
    width: 600,
    height: 600,
    title: "My Popup",
    close: function () {
      iframe.attr("src", "");
    },
    buttons: [{ text: "Call iFrame Function",
                click: function () { alert($("#myFrame").contentWindow); }
              },
              { text: "Close Popup",
                click: function () { $("#myDiv").dialog("close"); }
              }]
  });
  iframe.attr({ src: "SubPage.html" });
  dialog.dialog("open");
});

我无法解决的是......

如何在jQuery动态创建的iFrame中运行javascript，点击按钮？

为什么.contentWindow中的$("#myFrame").contentWindow总是undefined？（我可以确认$("#myFrame")会返回有问题的iframe。）

Answer 1

编辑： $（“＃myFrame”）。contentWindow未定义的原因是由iframe元素组成的jQuery对象没有contentWindow属性。你需要得到（0）来获得实际的窗口元素，你可以在其上调用该命名空间中定义的Javascript函数。

$("#myFrame").get(0).contentWindow.myFunction(args);

要遍历和操作其DOM，请使用此方法获取iframe的内容文档：

var framedoc = $("#myFrame").get(0).contentDocument || $("#myFrame").get(0).contentWindow.document;

然后你应该像普通文件一样操纵它，例如

$(framedoc).find("input#whatever").val(myInput).closest("form").submit()

或者你想要触发的任何东西。

从jQuery UI对话框中的按钮调用动态创建的iFrame中的函数

1 个答案: