HTML-код в качестве источника IFRAME, а не URL - PullRequest
Новая
       11

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

103 голосов
/ 24 мая 2011

Этот стандартный код для IFRAME, есть ли способ заменить URL-адрес src просто 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>

Ответы [ 3 ]

123 голосов
/ 24 мая 2011

Вы можете сделать это с помощью 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 только для них и атрибут "pure" srcdoc во всех браузерах не IE / Edge (проверьте caniuse.com , чтобы быть уверенным). 

<iframe srcdoc="<html><body>Hello, <b>world</b>.</body></html>"></iframe>
67 голосов
/ 16 мая 2015

использовать html5 srcdoc-polyfill Документы 

<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
19 голосов
/ 24 апреля 2013

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

...