Question

我将iframe中body元素的html设置为字符串str，然后我想在下一行访问该内容（这里只是使用警告调用来显示内容）但是html和append函数在调用警告声明时尚未完成。

$(function(){
....
$("#notes-tab span.add_draft").bind("click", function(e){
    var str = '';
    $(this).parent().siblings(".tab-content").children(".para").each(function(ind) {
        str += $(this).find('div:first').html();
    });
    var curr = $("#content_rte").contents().find("body").html();
    if (curr == ' ' || curr == '<br>') {
        $("#content_rte").contents().find("body").html(str);
    }
    else {
        $("#content_rte").contents().find("body").append(str);
    }
    alert($("#content_rte").contents().find("body").html());
});
});

当然，html和append函数都不会进行回调。

有人可以告诉我，在继续之前，人们通常会如何完成等待DOM的更改？

Answer 1

如果您使用的是jQuery，您可以依靠.closest()来确定您刚刚创建的元素是否具有父body标记，如果是，则意味着它已添加到DOM中。您可以编写如下所示的函数，以便在元素准备就绪时实际执行某些操作：

callWhenReady: function (selector, callback, scope) {
    var self = this;
    if ($(selector).closest('body').length) {
        callback.call(scope);
    } else {
        setTimeout(function () {
            self.callWhenReady(selector, callback, scope);
        }, 1);
    }
}

Answer 2

html和append都会调用domManip，这是一种同步方法，所以alert甚至不应该执行，直到这些调用完成。

您确定将您期望的值复制到您期望的位置吗？

Answer 3

您需要等待dom load事件，以便iframe有时间完成加载：

$(document).ready(function(){
    var str = '<div>HelloWorld</div>';
    var curr = $("#content_rte").contents().find("body").html();
    if (curr == ' ' || curr == '<br>') {
        //$("#content_rte").contents().find("body").html(str);
        $("#content_rte").contents().find("body").append(str);
    }
    else {
        $("#content_rte").contents().find("body").append(str);
    }
    alert($("#content_rte").contents().find("body").html());
});

Answer 4

尝试使用.ready()，这是“只要页面的文档对象模型（DOM）变得可以安全操作，便可以运行JavaScript代码的一种方式。”

$('#yourID').html('new content').ready(function(){
    // Do stuffs
});

Answer 5

你应该尝试$（window）.load（function（））而不是document.ready你也可以在你追加后触发事件。这样，只有在成功呈现附加后，事件才会运行。

window.load仅在dom加载后运行，然后dom中的所有内容也运行。

如果这对你不起作用，那么你总是可以在document.ready或window.load上运行setTimeout（）并将你的函数/事件放在那里，它会在特定的秒数后加载。

你可以尝试：

$(document).ready(function(){
  var curr = $("#content_rte").contents().find("body").html();
    if (curr == ' ' || curr == '<br>') {
        $("#content_rte").contents().find("body").html(str);
    }
    else {
        $("#content_rte").contents().find("body").append(str);
    }
});
$(window).load(function(){
    alert($("#content_rte").contents().find("body").html());
});

Answer 6

您需要使用$( document ).ready( function( ){ } )或$( function( ){ } )，但需要使用iframe的文档元素。

为此，您可以将脚本放入iframe的HTML

theIframeHTMLContent += '<script type="text/javascript" src="jquery.js"></script>' +
                        '<script type="text/javascript">' +
                          '$( function( ){ alert( "I\'m ready!" ); } );' +
                        '</script>';

$( 'body' ).append( '<iframe id="cool"></iframe>' );
$( '#cool' ).html( theIframeHTMLContent );

或者您可以尝试在新添加的iframe DOM元素本身上执行此操作，但是可以从父框架执行此操作。这在浏览器中是不同的，但以下示例应该可以工作。

$( 'body' ).append( '<iframe id="cool"></iframe>' )
var theFrame = $( '#cool' )[ 0 ];
var docEl = theFrame.contentDocument || theFrame.contentWindow || theFrame.document;
$( docEl ).ready( function( ){ /* ready stuff */ } );

告诉我，如果我错了，就像我说的那样，没有测试过。

Answer 7

我按照grancalavera的答案，但是我使用了lengh，因为我的选择器已经存在于身体......所以：

var finalLength = $(selector).html().length + data.length;
$(selector).html(data); //or $(selector).append(data);
//...
callWhenReady: function (selector, callback, finalLength, scope) {
    var self = this;
    if ($(selector).html().length === finalLength) {
        callback.call(scope);
    } else {
        setTimeout(function () {
            self.callWhenReady(selector, callback, scope);
        }, 1);
    }
}

Answer 8

除了在尝试检索HTML之前设置任意超时之外，没有直接的等待方法。这样做的代码是：

// wait for 250 ms, then try and retrieve contents
setTimeout(function() {
    alert($("#content_rte").contents().find("body").html());
}, 250);

你应该尝试让超时小到足以让人注意但是大到足以让内容更新，所以你可以远远超过250毫秒。

如何让代码等待html（）和append（）函数完成？

8 个答案: