Html代码作为IFRAME源而不是URL

Max*_*Max 108 html iframe frame

这个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>   
Run Code Online (Sandbox Code Playgroud)

lon*_*day 131

您可以使用数据URL执行此操作.这包括整个文档在单个HTML字符串中.例如,以下HTML:

<html><body>foo</body></html>
Run Code Online (Sandbox Code Playgroud)

可以编码为:

data:text/html;charset=utf-8,%3Chtml%3E%3Cbody%3Efoo%3C/body%3E%3C/html%3E
Run Code Online (Sandbox Code Playgroud)

然后设置为srciframe 的属性. 例子.


编辑:另一种选择是使用Javascript执行此操作.这几乎可以肯定是我选择的技术.您无法保证浏览器接受的数据URL有多长.Javascript技术看起来像这样:

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

iframedoc.body.innerHTML = 'Hello world';
Run Code Online (Sandbox Code Playgroud)


编辑2(2017年12月):使用Html5的srcdoc属性,就像在Saurabh Chandra Patel的回答中一样,现在应该是接受的答案!如果您可以有效地检测IE/Edge,那么一个提示是仅为它们使用srcdoc-polyfill库,并在所有非IE/Edge浏览器中使用"纯"srcdoc属性(请确保caniuse.com).

<iframe srcdoc="<html><body>Hello, <b>world</b>.</body></html>"></iframe>
Run Code Online (Sandbox Code Playgroud)

  • Internet Explorer支持?数据URI不能代表IE8中的html文件 (5认同)
  • 对于像我这样想用PHP编码HTML的人,你想要rawurlencode(http://php.net/manual/en/function.rawurlencode.php) (4认同)
  • 请注意,如果使用`innerHTML`浏览器将不会执行后代脚本标记.有关更多信息,请查看Element.innerHTML MDN页面的[安全注意事项部分](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML). (3认同)
  • 有没有办法在这里提供跨源标题?Chrome 一直在抱怨“阻止了一个源为“http://localhost”的框架访问跨源框架。 (2认同)

Sau*_*tel 69

使用html5 srcdoc-polyfill 文档

<iframe srcdoc="<html><body>Hello, <b>world</b>.</body></html>"></iframe>
Run Code Online (Sandbox Code Playgroud)

浏览器支持

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
Run Code Online (Sandbox Code Playgroud)

  • @msquitieri不,它说*本地*支持穷人,而不是polyfill's. (4认同)
  • 但是一旦你开始使用引号,这种情况就会中断 (2认同)

And*_*wan 19

根据W3Schools,HTML 5允许您使用新的"srcdoc"属性执行此操作,但浏览器支持似乎非常有限.

  • 还有[polyfill for srcdoc](https://github.com/jugglinmike/srcdoc-polyfill). (4认同)
  • @UweKeim感谢您建议使用polyfill.它重量轻,效果很好. (2认同)