作为IFRAME源代码而不是URL的HTML代码

这个IFRAME的标准代码是否有一种方法可以用Just html代码替换src URL？所以我的问题很简单，我有一个从MYSQL加载HTML主体的页面我想在一个框架中呈现该代码，以便它自己独立于页面的其余部分并且在该特定边界的范围内呈现它。作为IFRAME源代码而不是URL的HTML代码

<iframe src="http://example.com" name="test" height="120" width="600">You need a Frames Capable browser to view this content.</iframe>

来源

2011-05-23 Max

您可以使用数据网址进行此操作。这包括整个文档在一个单一的HTML字符串中。例如，下面的HTML：

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

可以被编码为这样的：

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

，然后设置为iframe的src属性。 Example。

编辑：另一种选择是用Javascript来做到这一点。这几乎可以肯定是我选择的技术。您无法保证浏览器接受数据网址的时间。 JavaScript的技术将是这个样子：

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

iframedoc.body.innerHTML = 'Hello world';

Example

编辑2（2017年十二月）：使用HTML5的srcdoc属性，就像在SAURABH钱德拉帕特尔“现在应该是被接受的答案！如果您可以detect IE/Edge efficiently，则小技巧是仅针对它们使用srcdoc-polyfill库，并且在所有非IE/Edge浏览器中使用“纯”srcdoc属性（请确定检查caniuse.com）。

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

来源

2011-05-23 20:46:36 lonesomeday

与JS方法的问题是，如果HTML包含单引号（其中OP不知道，直到运行时），为了不打破innerHTML赋值语句，他们需要从JS的角度逃脱......？ – 2013-04-24 05:19:42

是的，显然JS需要有效。这就是为什么，与我在我的回答中所说的相反，我几乎肯定不会这样做。我只是使用一个正常的iframe！ – lonesomeday 2013-04-24 08:54:49

Internet Explorer支持？数据URI不能代表IE8中的html文件 – franzlorenzon 2013-04-24 12:05:12

据W3Schools的，HTML 5让你这个用new "srcdoc" attribute做，但浏览器的支持显得非常有限。

来源

2013-04-24 03:03:59

还有一个[srcdoc的Polyfill]（https://github.com/jugglinmike/srcdoc-polyfill）。 – 2014-09-02 05:41:17

@UweKeim感谢您提供polyfill。它重量轻，效果很好。 – 2014-10-16 04:16:54

根据[caniuse.com]（https://caniuse.com/#feat=iframe-srcdoc），只有臭名昭着的微软IE和Edge浏览器不是“非常有限”。只需为微软用户使用[srcdoc-polyfill]（https://github.com/jugglinmike/srcdoc-polyfill）即可。 – Heitor 2017-12-26 04:36:46

使用HTML5 srcdoc，填充工具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

来源

2015-05-16 09:29:52

谢谢！我需要现代webkit webview的解决方案，而这是迄今为止最简单的方法！ – 2015-06-21 04:13:18

它不支持在IE – dude 2015-10-07 11:43:02

官方文档说它支持IE-6 + – 2015-10-07 14:37:24

作为IFRAME源代码而不是URL的HTML代码

回答

相关问题