Установить iframe innerHTML без загрузки страницы в нем (с помощью jquery)

Question

Я хочу установить содержимое iframe динамически, когда в iframe ранее не было загружено ни одной страницы.

Я делаю это:

iframe = $('<iframe id="thepage"></iframe>');

iframeHtml = 'iframeHtml';
$('body').append(iframe);

iframe
.contents()
.html(iframeHtml);

Но это не работаетHTML-код еще пуст.

Answer 1

лучший способ заполнить содержимое кадра - document.write

var dstFrame = document.getElementById('yourFrameId');
var dstDoc = dstFrame.contentDocument || dstFrame.contentWindow.document;
dstDoc.write(yourHTML);
dstDoc.close()

UPD: это

var iFrame = $('<iframe id="thepage"></iframe>');
$('body').append(iFrame);

var iFrameDoc = iFrame[0].contentDocument || iFrame[0].contentWindow.document;
iFrameDoc.write('<p>Some useful html</p>');
iFrameDoc.close();

Answer 2

Если вы хотите избежать использования document.write, что, как правило, больше не рекомендуется, вы можете получить содержимое кадра, чтобы добавить содержимое:

iframe = $('<iframe id="thepage"></iframe>')
iframeHtml = 'iframeHtml'
$('body').append(iframe)
iframe.contents().find('body').html(iframeHtml)

Answer 3

Используя JQuery, вы можете редактировать атрибут iframe srcdoc , передав ему HTML в виде строки:

$('#iframe_id').attr("srcdoc", htmlString);

Answer 4

iframe = $('<iframe id="thepage"></iframe>');

iframeHtml = 'iframeHtml'; $('body').append(iframe);

iframe .contents() .html(iframeHtml);

причина, по которой он не работает, состоит в том, что contents() возвращает document объект, а html() работает только на HTMLElemnt объектах, html() в основном является оболочкой innerHTML свойство и document не имеют такого свойства.

Answer 5

Используйте метод jQuery contents () Вы можете использовать метод jQuery contents () в сочетании с методами find (), val () и html () для вставки текста или HTML в тело iframe.

var EditFrame = $("#EditWindow").contents().find('body');
var message = "Your message which needs to show in Iframe";
EditFrame.html(message);