Html-код как источник IFRAME, а не URL-адрес

Этот стандартный код для 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>

Ответ 1

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

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

Ответ 2

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

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

Поддержка браузера

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

Ответ 3

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