Best IT Recipes

HTML code as IFRAME source, not URL

This is the standard code for IFRAME, is there a way to replace the src url with Just html code? so my problem is simple: I have a page where it loads the HTML body from MYSQL. I want to present this code in a frame so that it makes it independent of the rest of the page and within this particular border.

<iframe src="http://example.com" name="test" height="120" width="600">You need a Frames Capable browser to view this content.</iframe>
+66
html iframe frame
May 23 '11 at 20:26
source share
3 answers

You can do this using the data url. This includes the entire document in one line of HTML. For example, the following HTML:

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

can be encoded as follows:

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

and then set the src iframe attribute. An example .



Edit: Another option is to do this using Javascript. This is almost certainly the method I would choose. You cannot guarantee how long the data URL will be accepted by the browser. The Javascript technique will look something like this:

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

Example



Edit 2 (December 2017) : use the Html5 srcdoc attribute, as in the answer of Saurabh Chandra Patel , which should now be an accepted answer! If you can effectively define IE / Edge , the tip will use srcdoc-polyfill only for them and the "pure" srcdoc attribute in all browsers without IE / Edge (check caniuse.com to make sure).

 <iframe srcdoc="<html><body>Hello, <b>world</b>.</body></html>"></iframe>
+80
May 23 '11 at 20:46
source share

use html5 srcdoc- polyfill docs

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

Browser support

 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)
+35
May 16 '15 at 9:29
source share

According to W3Schools, HTML 5 allows you to do this with the new srcdoc attribute , but browser support seems very limited.

+18
Apr 24 '13 at 3:03
source share


More articles:


All Articles