3

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

还有一个复杂的问题：

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

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

我不是很喜欢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()无需使用即可在 iframe 上运行的功能jQuery.load()？

4

3 回答 3

1

我不确定它是否暗示了您对使用的厌恶，$(window).load()但您可以直接绑定load()到 iframe 并尽可能接近，而无需直接访问将 jquery 添加到 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);
            }
        }
    );
})

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

于 2011-05-03T15:27:55.040 回答
1

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

简短的回答：没有。

长答案：

jQuery.isReady一旦 jQuery 认为 DOM 已准备好并触发绑定到 ready 事件的事件处理程序，则设置为 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");
    }
},
于 2012-08-21T08:06:36.843 回答
0

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

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

于 2011-05-03T13:27:48.490 回答