Создание iframe с заданным HTML динамически

Question

Создание iframe с заданным HTML динамически

Я пытаюсь создать iframe из JavaScript и заполнить его произвольным HTML, например:

var html = '<body>Foo</body>';

var iframe = document.createElement('iframe');

iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(html);

Я бы ожидал iframe чтобы затем содержать допустимое окно и документ. Однако, это не так:

консоли>.журнал(фрейма.contentWindow);

null

попробуйте сами:http://jsfiddle.net/TrevorBurnham/9k9Pe/

что я упускаю из виду?

581 4

javascript iframe

4 ответов:

Comments

Ничего не найдено.

GillesC · Accepted Answer · 2015-07-21 15:44:06

задание src созданного iframe в javascript не запускает синтаксический анализатор HTML, пока элемент не будет вставлен в документ. Затем HTML обновляется, и синтаксический анализатор HTML будет вызван и обработает атрибут, как ожидалось.

http://jsfiddle.net/9k9Pe/2/
var iframe = document.createElement('iframe');
var html = '<body>Foo</body>';
iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(html);
document.body.appendChild(iframe);
console.log('iframe.contentWindow =', iframe.contentWindow);
также этот ответ на ваш вопрос важно отметить, что этот подход имеет проблемы совместимости с некоторыми браузерами, см. ответ @mschr для кросс-браузерное решение.

mschr · Accepted Answer · 2016-05-08 20:53:03

все же ваш src = encodeURI должно работать, я бы пошел другим путем:
var iframe = document.createElement('iframe');
var html = '<body>Foo</body>';
document.body.appendChild(iframe);
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(html);
iframe.contentWindow.document.close();
поскольку это не имеет ограничений x-домена и полностью выполняется через iframe ручка, вы можете получить доступ и манипулировать содержимым кадра позже. Все, что вам нужно сделать, это убедиться, что содержимое было визуализировано, которое будет (в зависимости от типа браузера) запускаться во время/после .команда записи - но не обязательно делать, когда close() is называемый.

100% совместимый способ выполнения обратного вызова может быть такой подход:
<html><body onload="parent.myCallbackFunc(this.window)"></body></html>
Iframes имеет событие onload, однако. Вот подход к доступу к внутреннему html как DOM (js):
iframe.onload = function() {
   var div=iframe.contentWindow.document.getElementById('mydiv');
};

halfcube · Accepted Answer · 2015-03-01 05:58:34

Спасибо за ваш большой вопрос, это поймало меня несколько раз. При использовании источника HTML dataURI я нахожу, что мне нужно определить полный документ HTML.

см. ниже измененный пример.
var html = '<html><head></head><body>Foo</body></html>';
var iframe = document.createElement('iframe');
iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(html);
обратите внимание на содержимое html, завернутое с <html> теги и тег iframe.src строку.

элемент iframe должен быть добавлен в дерево DOM для анализа.
document.body.appendChild(iframe);
вы не сможете проверить iframe.contentDocument если вы disable-web-security на вашем браузере. Вы получите сообщение

DOMException: не удалось прочитать свойство 'contentDocument' из 'HTMLIFrameElement': заблокирован кадр с источником"http://localhost:7357 " от доступа к кадру перекрестного происхождения.

zedd45 · Accepted Answer · 2014-06-24 21:43:46

существует альтернатива для создания iframe, содержимое которого представляет собой строку HTML:атрибут srcdoc. Это не поддерживается в старых браузерах (главный из них:Internet Explorer и, возможно, Safari?), но есть полифилл для этого поведения, которое вы могли бы поместить в условные комментарии для IE, или использовать что-то вроде has.js для условно ленивой загрузки.