Код HTML в качестве источника IFRAME, а не URL

123

Этот стандартный код для IFRAME, есть ли способ заменить URL-адрес src на Just html-код? так что моя проблема проста, у меня есть страница, на которой загружается тело HTML из MYSQL. Я хочу представить этот код во фрейме, чтобы он отображался независимо от остальной части страницы и в пределах этой конкретной границы.

<iframe src="http://example.com" name="test" height="120" width="600">You need a Frames Capable browser to view this content.</iframe>

html iframe frame

— Максимум
источник

Ответы:

150

Вы можете сделать это с помощью URL-адреса данных. Это включает весь документ в одной строке HTML. Например, следующий HTML:

<html><body>foo</body></html>

можно закодировать так:

data:text/html;charset=utf-8,%3Chtml%3E%3Cbody%3Efoo%3C/body%3E%3C/html%3E

а затем установить как srcатрибут iframe. Пример .

Изменить: другая альтернатива - сделать это с помощью Javascript. Я бы почти наверняка выбрал именно эту технику. Вы не можете гарантировать, какой длины URL-адрес данных будет принимать браузер. Техника Javascript будет выглядеть примерно так:

var iframe = document.getElementById('foo'),
    iframedoc = iframe.contentDocument || iframe.contentWindow.document;

iframedoc.body.innerHTML = 'Hello world';

пример

Изменить 2 (декабрь 2017 г.) : используйте атрибут srcdoc Html5 , как и в ответе Саураба Чандры Пателя , который теперь должен быть принятым ответом! Если вы можете эффективно обнаруживать IE / Edge , советуем использовать библиотеку srcdoc-polyfill только для них и атрибут «чистый» srcdoc во всех браузерах, отличных от IE / Edge ( для уверенности проверьте caniuse.com ).

<iframe srcdoc="<html><body>Hello, <b>world</b>.</body></html>"></iframe>

— lonesomeday
источник

Поддержка Internet Explorer? URI данных не может представлять html-файлы в IE8

— franzlorenzon

Есть ли способ предоставить здесь заголовки с перекрестным происхождением? Хром не перестает жаловаться Blocked a frame with origin "http://localhost" from accessing a cross-origin frame.

— jozxyqk 03

@AndrewSwan Я не совсем понимаю проблему одинарных кавычек. Вы можете привести мне пример?

— Септаграмма

Для всех вроде меня, кто искал, как кодировать HTML таким образом с помощью php, вам нужен rawurlencode ( php.net/manual/en/function.rawurlencode.php )

— Braiba 02

Обратите внимание, что при использовании innerHTMLбраузера не будут выполняться дочерние теги сценария. Дополнительные сведения см. В разделе «Вопросы безопасности» на странице Element.innerHTML MDN.

— Леонид Васильев

использовать html5новый атрибут srcdoc(srcdoc-polyfill) Docs

<iframe srcdoc="<html><body>Hello, <b>world</b>.</body></html>"></iframe>

Поддержка браузера - протестировано в следующих браузерах:

Microsoft Internet Explorer
6, 7, 8, 9, 10, 11
Microsoft Edge
13, 14
Safari
4, 5.0, 5.1 ,6, 6.2, 7.1, 8, 9.1, 10
Google Chrome
14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24.0.1312.5 (beta), 25.0.1364.5 (dev), 55
Opera
11.1, 11.5, 11.6, 12.10, 12.11 (beta) , 42
Mozilla FireFox
3.0, 3.6, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18 (beta), 50

— Саураб Чандра Патель
источник

Спасибо ! Мне нужно было решение для современного веб-просмотра webkit, и это был, безусловно, самый простой способ сделать это!

— Antoine Bolvy

Он не поддерживается в IE

— чувак

CanIUse.com сообщает, что поддержка довольно слабая: caniuse.com/#search=srcdoc

— msquitieri

@msquitieri Нет, там написано, что нативная поддержка плохая, а не полифиллы.

— Walf

Но это ломается , как только вы начинаете использовать кавычки

— Агиль

Согласно W3Schools, HTML 5 позволяет делать это с помощью нового атрибута «srcdoc» , но поддержка браузера кажется очень ограниченной.

— Эндрю Свон
источник

Также существует Polyfill для srcdoc .

— Уве Кейм

@UweKeim Спасибо, что предложили полифилл. Он легкий и отлично работает.

— The Muffin Man

Согласно caniuse.com только печально известные браузеры Microsoft IE и Edge (кроме Opera Mini) не поддерживают атрибут srcdoc , поэтому он НЕ «очень ограничен». Просто используйте srcdoc-polyfill для пользователей Microsoft.

— Heitor