Динамическое содержимое iframe возвращает источник, а не разобранный код

Question

Первый вопрос, поэтому, пожалуйста, исправьте меня, если это неверный формат.

Мне нужно получить html для двух динамических элементов из динамически созданного iframe, ниже код возвращает «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 и добавляя тайм-аут, чтобы завершить загрузку, всегда один и тот же ответ.

EDIT: Добавлен базовый код 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 динамически генерируется.

У меня нет рабочего кода для проверки вашей проблемы, поэтому приведенное выше мое предположение для решения вашей проблемы.