Question

我在页面上有一个id为#editor_frame的子iframe。 iframe内部是一个小的jquery小部件（不是来自小部件工厂的jquery ui-widget），它在一些用户交互之后触发一个简单的“更改”事件。

我正在尝试从父页面绑定到该事件......

$('#editor_iframe').contents().find('#uielement').bind('change', function(){....});

没有运气。在进行了一些研究之后，我猜iframe中的事件被绑定到该窗口内的jquery命名空间......如果这是正确的，我如何在iframe窗口中访问jquery命名空间？

任何参赛者？

Answer 1

您可以通过以下方式访问来自父级的子iframe中的javascript：

document.getElementById('editor_iframe').contentWindow.yourfunction()

同样，由于jquery只是一个函数，你可以像这样访问iframe jquery实例：

document.getElementById('editor_iframe').contentWindow.$(yourjquery)...

Answer 2

埃里克，我今天遇到了类似的问题。

我发现我的javascript函数在iframe完成加载之前运行。试试这个：

$('#editor_iframe').load(function() {
  $(this)
    .contents()
    .find('#uielement')
    .bind('change', function() {
        //  do stuff
    });
});

Answer 3

我遇到了同样的问题，但到目前为止提供的解决方案并没有为我解决。在我看来，现有的解决方案并没有直接回答这个问题。所以这是我的解决方案。

重述问题：在父网页中，我想侦听子页面触发的事件。

解决方案：解决这个谜团的关键是要意识到在特定窗口中运行的jQuery实例是相互隔离的。因此，当您在子级中触发事件时，只有子级的jQuery实例可以侦听它。解决方案是向父窗口中调用函数的子窗口添加一个监听器。

触发子页面中的事件：

$(document).trigger("myCustomEvent");

父页面中的事件处理程序代码：

var $iframe = $("#theIframe");

// Wait for the iframe to finish loading...
$iframe.on("load", function () {
    // Bind an event handler to the iframe's instance of jQuery, listening for the event called "myCustomEvent".
    $iframe[0].contentWindow.$($iframe[0].contentWindow.document).on("myCustomEvent", function () {
        // The code in that you put into this anonymous function resides in and will
        // run in the context of the parent page.
    });
});

Answer 4

我建议使用postMessage在父母与孩子之间进行交流。更安全，更可靠。

绑定到子iframe中的自定义事件？

4 个答案: