jQuery.ready() 在 iframe.contentDocument 上使用时有效吗？

Question

简单问题（如标题所述）： 在 iframe.contentDocument 上使用 jQuery.ready() 是否有效？

还有一个复杂的问题：

我必须在 CMS 的输入字段上挂钩 keyup 事件，因此我无法控制 HTML，只能控制脚本。

输入位于嵌套在另一个 iframe 中的 iframe 内，因此有一个顶部窗口（浏览器窗口）、一个 iframe（我们称之为 iframe1）和其中的另一个 iframe（我们称之为 iframe2）。脚本和 jQuery 位于顶部窗口的 部分。

我不太喜欢 setTimeout/setInterval ，所以我最初的想法是像这样使用 jQuery.ready() （我省略了选择 iframe 的代码）：

$(document).ready(function(){
  $(iframe1.contentDocument).ready(function(){
    $(iframe2.contentDocument).ready(function(){
      $("input").keyup(function(){ /* Do stuff */ });
    });
  });
});

问题是，当 .ready() 在 iframe1 上触发时，我可以检查 iframe1.contentDocument.body.innerHTML ，结果发现它是一个空字符串。不是人们所期望的那样。因此，代码无法绑定 keyup 事件。

如果有人想“您使用的是正确的选择器上下文吗？”：是的，我正在正确的文档中选择 iframe 元素（尽管上面的代码片段可能无法完全说明这一点，因为我想保持简单）。也不存在任何同源策略问题 - 所有 iframe 和父窗口都位于同一域中。

使用 $(window).load() 似乎可以工作，但是等待加载图像等的等待时间太长，这对于应用程序来说是不可接受的。

有没有办法实现 jQuery.ready() 功能，无需使用 jQuery.load() 即可在 iframe 上工作？

Answer 1

我不确定您是否厌恶使用 $(window).load() 但您可以将 load() 直接绑定到 iframe 并获取尽可能关闭，而无需直接访问添加 jquery 的 iframe 内容。

我过去做过类似的事情，根据 iframe 内容的高度动态调整 iframe 的大小。这是一个可能不直接相关的示例，但您应该能够了解它正在做什么的要点。

    $(function(){
    var $content_iframe = $('#content_iframe')

    $content_iframe.load(
        function(){
            var contentHeight = $content_iframe.contents().find('html body').height();
            if (contentHeight > 1070){
                $(this).height(contentHeight + 30);
            }
            else{
                $(this).height(1100);
            }
        }
    );
})

就图像加载时间等而言，这可能具有相同的缺点。祝你好运！

Answer 2

只是注意到我从未接受过这个问题的答案。

简短回答：否。

详细回答：

一旦 jQuery 认为 DOM 已准备好并触发绑定到就绪事件的事件处理程序，jQuery.isReady 就会设置为 true。它检查（以及其他一些事情）document.body 是否使用重复的 setTimeout() 定义，直到它被定义，但仅限于 jQuery 所在的窗口被定义。换句话说，它不适用于 (i)Frames。

当前版本 jQuery (1.8.0) 的就绪代码：

// Handle when the DOM is ready
ready: function( wait ) {

    // Abort if there are pending holds or we're already ready
    if ( wait === true ? --jQuery.readyWait : jQuery.isReady ) {
        return;
    }

    // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).
    if ( !document.body ) {
        return setTimeout( jQuery.ready, 1 );
    }

    // Remember that the DOM is ready
    jQuery.isReady = true;

    // If a normal DOM Ready event fired, decrement, and wait if need be
    if ( wait !== true && --jQuery.readyWait > 0 ) {
        return;
    }

    // If there are functions bound, to execute
    readyList.resolveWith( document, [ jQuery ] );

    // Trigger any bound ready events
    if ( jQuery.fn.trigger ) {
        jQuery( document ).trigger("ready").off("ready");
    }
},

Answer 3

如果您可以控制加载到 框中的页面，它们也可以加载自己的 jQuery 副本并拥有自己的“.ready()”处理程序。这些处理程序可以依次与“顶部”页面的 JavaScript 代码进行通信（可能通过 jQuery“延迟”对象），以便可以将外部页面设置为在所有 iframe 都“就绪”时运行代码。

您需要在“就绪”状态之前设置父页面代码，因为您不确定父页面是否会在子 页面。