Javascript jQuery.ready（）在iframe.contentDocument上使用时有效吗？

简单问题（如标题所述）：

jQuery.ready（）

在

iframe.contentDocument

上使用时是否有效

还有一个复杂的问题：

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

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

部分

我不太喜欢

setTimeout/setInterval

，所以我最初的想法是像这样使用

jQuery.ready（）

（我省略了选择iframe的代码）：

问题是，在iframe1上激发

.ready（）

时，我可以检查

iframe1.contentDocument.body.innerHTML

，结果它是一个空字符串。这不是人们所期望的。因此，代码无法绑定keyup事件

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

使用

$（window）.load（）

似乎可行，但等待加载图像等的等待时间太长，应用程序无法接受

---

是否可以实现一个

jQuery.ready（）

功能，该功能将在iFrame上运行，而不使用

jQuery.load（）

？

如果您可以控制加载到

框中的页面，那么它们也可以加载自己的jQuery副本并拥有自己的“.ready（）”处理程序。反过来，这些处理程序可以与“top”页面的JavaScript代码通信（可能通过jQuery“Deferred”对象），这样就可以将外部页面设置为在所有iFrame都“就绪”时运行代码

---

您可能希望在“就绪”状态之前设置父页面代码，因为您不确定父页面是否会在子

页面之前就绪。

我不确定这是否暗示您不喜欢使用

$（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);
            }
        }
    );
})

---

这可能在图像加载时间等方面有相同的缺点。祝你好运

我注意到我从来没有接受过这个问题的答案

简短回答：没有

长答覆：

一旦jQuery认为DOM已经就绪并触发绑定到就绪事件的事件处理程序，

jQuery.isReady

就会设置为true。它检查（除其他一些事项外）是否使用重复的

setTimeout（）

定义

document.body

，直到定义它为止，但仅限于定义jQuery的窗口。换句话说，它不适用于（i）帧

当前版本jQuery（1.8.0）中的就绪代码：

---

“如果您可以控制加载到框中的页面…”不，我没有。iFrame上的.load（）的问题是，它会在每次重新加载iFrame时触发，如果在绑定时已经加载了iFrame，则不会触发。我最后检查了iFrame窗口是否在window.frames数组中，如果不是现在，则在窗口上绑定.load（）。啊，我看到了问题所在，不过听起来你已经找到了一个不错的解决方法。干杯

    $(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);
            }
        }
    );
})

// 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");
    }
},