从jQuery UI对话框中的按钮调用动态创建的iFrame中的函数 [英] Calling function in dynamically created iFrame, from button in jQuery UI dialog

问题描述

摘要：

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

Using jQuery UI dialogs and a dynamically created iFrame, is it possible to call a function inside the iFrame from one of the buttons defined in the .dialog

详细信息：

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

I'm only just starting to cut my teeth with jQuery and jQuery UI, and I am trying to convert an existing application over to using the .dialog functionality.

我之前使用的插件用于内联弹出窗口很好，但是jQuery不能与它共存他们都使用 $（）方法。我知道你可以避免与其他图书馆的冲突，但我认为移动到jQuery lock-stock-and-barrel更容易，而不是让它们共存。

The previous plugin that I was using for "inline popup windows" was good, but jQuery cannot co-exist with it as they both use the $() method. I am aware you can avoid conflicts with other libraries, but I thought it was easier to move over to jQuery lock-stock-and-barrel, rather than make them co-exist.

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

The advantage of the previous plugin was the ability to specify the content of the popup to be either an existing <div> on the page, direct HTML code or (most importantly to me) the URL to a different page.

这个答案真的对我有帮助这些能力有效，这就是我现在所拥有的...

This answer really helped me get the last of those abilities working, and this is what I currently have...

$(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，点击按钮？

How can I run javascript in the iFrame that has been created dynamically by the jQuery, via a button click??

为什么是 $（＃myFrame）中的 .contentWindow .contentWindow 始终 undefined ？ （我可以确认 $（＃myFrame）返回有问题的iframe。）

Why is the .contentWindow in $("#myFrame").contentWindow always undefined? (I can confirm that $("#myFrame") returns the iframe in question.)

推荐答案

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

The reason $("#myFrame").contentWindow is undefined is that the jQuery object consisting of the iframe element does not have a contentWindow property. You need to get(0) on it to get the actual window element, on which you can call Javascript functions defined in that namespace.

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

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

To traverse and manipulate its DOM, use this to get your iframe's content document:

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

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

Then you should be able to manipulate it like a normal document, e.g.

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

或者你想要触发的是什么。

Or whatever it is you're wanting to trigger.

这篇关于从jQuery UI对话框中的按钮调用动态创建的iFrame中的函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！