javascript - 动态 iframe 内容返回源代码，而不是解析后的代码

Question

第一个问题，如果格式不对请指正。

我需要从动态创建的 iframe 中检索两个动态元素的 html，下面的代码返回“未定义”。但我可能遗漏了一些非常明显的东西。

$("#frame0").contents().find(elementID).html();

我正在将同一个域页面加载到 iframe 中，iframe 中的两个元素是从其 jquery 创建的，其余是 iframe 中的静态内容。 iframe 是在单击按钮时创建和附加的。页面中的 iframe 看起来和加载都很完美。

下面是我的按钮点击中的相关代码:

$("#frameWrapper").append($('<iframe id="frame0" src="' + url + '"/>'));
$("#frame0").bind("load",function(){
    var html = $(this).contents().find('#content').html();
    var data = $(this).contents().find(elementID).html();
    var table = $(this).contents().find(elementID).parent().find("table").html();
    console.log(html);
    console.log(data);
    console.log(table);
});

#frameWrapper是当前页面中动态添加的容器。

#frame0 是实际的 iframe。

上面代码中的三个console.log中，html总是返回与页面iframe中实际view不一样的源代码，data 和 table 始终是未定义的，它们是两个动态元素。

如果我从上面的代码中删除 .html()，那么所有三个元素都会在 console.log 中找到并返回。

我已经尝试了太多无法列出的事情，在这里我可以找到尽可能多的答案，包括在我写这篇文章时检查所有建议的答案。但一些想法包括，使用纯 javascript 并添加超时以确保加载已完成，始终是相同的响应。

编辑:添加了基本的 iframe 代码:

<div id="content">
    <div class="wrap">
        <div id="elementID"></div>
        <table class="table"></table>
    </div>
</div>

#elementID 和 .table 在源代码中为空，仅在加载时通​​过 jquery 函数填充。

编辑 2:jsfiddle显然它在跨域策略方面存在问题，因此它并不是一个很好的例子，但它是一个开始。

Answer 1

使用这个:

$("#frameWrapper").on("load", "#frame0", function () {
    var html = $(this).contents().find('#content').html();
    var data = $(this).contents().find(elementID).html();
    var table = $(this).contents().find(elementID).parent().find("table").html();
    console.log(html);
    console.log(data);
    console.log(table);
});

...而不是 $("#frame0").bind("load",function(){...

这称为委托(delegate)事件，应该使用，因为 iframe 是动态生成的。

我没有用于测试您的问题的工作代码，因此以上是我对解决您的问题的猜测。