HTML代码作为IFRAME源而不是URL

122

这是IFRAME的标准代码，有没有办法用Just html代码替换src URL？所以我的问题很简单，我有一个页面，该页面从MYSQL加载HTML主体，我想在框架中显示该代码，以便使其独立于页面的其余部分，并不受特定边界的限制。

<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

— 最高
source

Answers:

148

您可以使用数据URL进行此操作。这将整个文档包含在单个HTML字符串中。例如，以下HTML：

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

可以这样编码：

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

然后设置为srciframe 的属性。实例。

编辑：另一种选择是用Javascript做到这一点。几乎可以肯定，这是我会选择的技术。您无法保证浏览器将接受数据URL多长时间。Javascript技术如下所示：

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

iframedoc.body.innerHTML = 'Hello world';

例

编辑2（2017年12月）：使用Html5的srcdoc属性，就像在Saurabh Chandra Patel的答案中一样，现在应该将其作为公认的答案！如果您可以有效地检测IE / Edge，则技巧是仅对它们使用srcdoc-polyfill库，并在所有非IE / Edge浏览器中使用“ pure” srcdoc属性（请确保检查caniuse.com）。

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

— 寂寞的一天
source

Internet Explorer支持吗？数据URI无法代表IE8中的html文件

— franzlorenzon 2013年

有没有办法在这里提供跨源标头？Chrome一直在抱怨Blocked a frame with origin "http://localhost" from accessing a cross-origin frame。

— jozxyqk 2014年

@AndrewSwan我不太理解单引号的问题。你可以给我一个例子吗？

— 2015年

对于像我这样一直在寻找如何用php编码HTML的人，您需要rawurlencode（php.net/manual/en/function.rawurlencode.php）

— Braiba 2015年

请注意，如果使用innerHTML浏览器，将不会执行后代脚本标签。有关更多信息，请检查 Element.innerHTML MDN页面的“ 安全注意事项”部分。

— Leonid Vasilev

使用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

— 索拉·钱德拉·帕特尔（Saurabh Chandra Patel）
source

谢谢！我需要一个用于现代Webkit Webview的解决方案，这是迄今为止最简单的方法！

— Antoine Bolvy 2015年

IE浏览器不支持该功能

— dude 2015年

CanIUse.com表示支持程度很差：caniuse.com/#search=srcdoc

— msquitieri 2015年

@msquitieri不，它说本地支持不佳，而不是polyfill的。

— 沃尔夫

但是，一旦您开始使用引号，此操作就会中断

— Agil

根据W3Schools的介绍，HTML 5允许您使用新的“ srcdoc”属性来执行此操作，但是浏览器支持似乎非常有限。

— 安德鲁·斯旺
source

还有一个srcdoc的Polyfill。

— Uwe Keim 2014年

@UweKeim感谢您建议使用polyfill。它很轻巧，效果很好。

— 松饼人

根据caniuse.com的说法，只有臭名昭著的Microsoft IE和Edge浏览器（Opera Mini除外）不支持srcdoc属性，因此它不是“非常有限”的。只需对Microsoft用户使用srcdoc-polyfill。

— Heitor