Question

第一个问题，如果格式错误，请纠正我。

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

$("#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.logs中， html 始终返回的源代码与页面上iframe中的实际视图不同，数据和表始终未定义，它们是两个动态元素。

如果从上面的代码中删除.html（），则会在console.log中找到并返回所有三个元素。

我已经尝试了很多东西要列出，因为我可以找到很多答案，包括在我写这篇文章时检查所有建议的答案。但是一些想法包括，使用普通的javascript并添加超时以确保加载完成，总是相同的响应。

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

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

源代码中

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

EDIT2：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(){...

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

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

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

1 个答案: