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

摘要：

使用jQuery UI对话框和动态创建的iFrame ，是否可以从.dialog定义的按钮之一调用iFrame的函数

细节：

我只是开始用jQuery和jQuery UI开始，我试图将现有的应用程序转换为使用.dialogfunction。

我用于“内联弹出窗口”的上一个插件很好，但是jQuery不能与它共存，因为它们都使用$()方法。 我知道你可以避免与其他库冲突 ，但我认为更容易转移到jQuery lock-stock-and-barrel，而不是让它们共存。

上一个插件的优点是能够将弹出窗口的内容指定为页面上的现有

，将HTML代码或（最重要的是我）指向不同页面的URL。

这个答案真的帮助我获得了最后一个能力，这就是我现在所拥有的……

 $(document).ready(function () { var iframe = $(''); var dialog = $('
').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，点击按钮？

为什么$("#myFrame").contentWindow的.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() 

或者无论你想要触发什么。