Код 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>   

Ответы:


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>

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

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

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

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

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

92

использовать 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

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

1
Он не поддерживается в IE
чувак

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

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

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

21

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



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

1
Согласно caniuse.com только печально известные браузеры Microsoft IE и Edge (кроме Opera Mini) не поддерживают атрибут srcdoc , поэтому он НЕ «очень ограничен». Просто используйте srcdoc-polyfill для пользователей Microsoft.
Heitor
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.