Html 代码作为 IFRAME 源而不是 URL
Posted
技术标签:
【中文标题】Html 代码作为 IFRAME 源而不是 URL【英文标题】：Html code as IFRAME source rather than a URL 【发布时间】：2011-08-31 10:50:51 【问题描述】：这个 IFRAME 的标准代码，有没有办法用 Just html 代码替换 src URL？所以我的问题很简单，我有一个页面，它从 mysql 加载 HTML 正文>
<iframe src="http://example.com" name="test" >You need a Frames Capable browser to view this content.</iframe>
【问题讨论】：
【参考方案1】：我有一个页面，它从 MYSQL 加载 HTML 正文
如果只是加载数据文本的一部分，带有未编码 dataUri 的 object 也可能满足您的需求：
HTML
<object>元素表示一个外部资源，可以将其视为图像、嵌套浏览上下文或由插件处理的资源。
body display:flex;min-height:25em;
p margin:auto;
object margin:0 auto;background:lightgray;<p>here My uploaded content: </p>
<object data='data:text/html,
<style>
.table
display: table;
text-align:center;
width:100%;
height:100%;
.table > *
display: table-row;
.table > main
display: table-cell;
height: 100%;
vertical-align: middle;
</style>
<div class="table">
<header>
<h1>Title</h1>
<p>subTitle</p>
</header>
<main>
<p>Collection</p>
<p>Version</p>
<p>Id</p>
</main>
<footer>
<p>Edition</p>
</footer>'>
</object>但是保持你的 iframe 想法，你也可以在你的 iframe 标记中加载你的 HTML 并将其设置为 srcdoc 值。你不必介意引号或将其转换为 dataUri，而只需要触发一次 onload。
HTML 内联框架元素 (
<iframe>) 表示嵌套的浏览上下文，将另一个 HTML 页面嵌入到当前页面中。
下面的两个 iframe 都将呈现相同的内容，一个需要额外的 javascript。
加载完整文档的示例：
body
display: flex;
min-height: 25em;
p
margin: auto;
iframe
margin: 0 auto;
min-height: 100%;
background:lightgray;
<p>here my uploaded contents =>:</p>
<iframe srcdoc='<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
html, body
height: 100%;
margin:0;
body.table
display: table;
text-align:center;
width:100%;
.table > *
display: table-row;
.table > main
display: table-cell;
height: 100%;
vertical-align: middle;
</style>
</head>
<body class="table">
<header>
<h1>title</h1>
<p>injected via <code>srcdoc</code></p>
</header>
<main>
<p>Collection</p>
<p>Version</p>
<p>Id</p>
</main>
<footer>
<p>Edition</p>
</footer>
</body>
</html>'>
</iframe>
<iframe onload="this.setAttribute('srcdoc', this.innerHTML);this.setAttribute('onload','')">
<!-- below html loaded -->
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style>
html,
body
height: 100%;
margin: 0;
overflow:auto;
body.table
display: table;
text-align: center;
width: 100%;
.table>*
display: table-row;
.table>main
display: table-cell;
height: 100%;
vertical-align: middle;
</style>
</head>
<body class="table">
<header>
<h1>Title</h1>
<p>Injected from <code>innerHTML</code></p>
</header>
<main>
<p>Collection</p>
<p>Version</p>
<p>Id</p>
</main>
<footer>
<p>Edition</p>
</footer>
</body>
</html>
</iframe>【讨论】：
【参考方案2】：iframe srcdoc: 该属性包含 HTML 内容，它将覆盖 src 属性。如果浏览器不支持 srcdoc 属性，它将回退到 src 属性中的 URL。
让我们通过一个例子来理解它
<iframe
name="my_iframe"
srcdoc="<h1 style='text-align:center; color:#9600fa'>Welcome to iframes</h1>"
src="https://www.birthdaycalculatorbydate.com/"
></iframe>
原创内容取自iframes。
【讨论】：
【参考方案3】：使用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
【讨论】：
谢谢！我需要一个现代 webkit webview 的解决方案，这是迄今为止最简单的方法！ IE不支持 CanIUse.com 说支持很差：caniuse.com/#search=srcdoc @msquitieri 不，它说 native 支持差，而不是 polyfill。 但是一旦你开始使用引号就会中断【参考方案4】：您可以使用数据 URL 执行此操作。这将整个文档包含在单个 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 执行此操作。这几乎肯定是我会选择的技术。您无法保证浏览器将接受多长时间的数据 URL。 Javascript 技术看起来像这样：
var iframe = document.getElementById('foo'),
iframedoc = iframe.contentDocument || iframe.contentWindow.document;
iframedoc.body.innerHTML = 'Hello world';
Example
编辑 2（2017 年 12 月）：使用 Html5 的 srcdoc 属性，就像在 Saurabh Chandra Patel 的回答中一样，现在谁应该成为公认的答案！如果你可以detect IE/Edge efficiently，一个提示是只为它们使用srcdoc-polyfill 库，并在所有非IE/Edge 浏览器中使用“纯”srcdoc 属性（请检查caniuse.com 以确保）。
<iframe srcdoc="<html><body>Hello, <b>world</b>.</body></html>"></iframe>
【讨论】：
Internet Explorer 支持？数据 URI 不能代表 IE8 中的 html 文件 有没有办法在这里提供跨域标头？ Chrome 一直在抱怨Blocked a frame with origin "http://localhost" from accessing a cross-origin frame。
@AndrewSwan 我不太明白单引号的问题。可以举个例子吗？
对于像我这样正在寻找如何使用 php 以这种方式编码 HTML 的人，您需要 rawurlencode (php.net/manual/en/function.rawurlencode.php)
请注意，如果您使用innerHTML，浏览器将不会执行后代脚本标签。有关详细信息，请查看 Element.innerHTML MDN 页面的Security considerations section。【参考方案5】：
根据 W3Schools，HTML 5 允许您使用 new "srcdoc" attribute 来执行此操作，但浏览器支持似乎非常有限。
【讨论】：
还有a Polyfill for srcdoc。 @UweKeim 感谢您推荐 polyfill。它很轻巧，效果很好。 根据caniuse.com 的说法，只有臭名昭著的微软 IE 和 Edge 浏览器（除了 Opera Mini）不支持 srcdoc 属性，因此它不是“非常有限”。微软用户只需使用srcdoc-polyfill。以上是关于Html 代码作为 IFRAME 源而不是 URL的主要内容，如果未能解决你的问题，请参考以下文章
Pdf.js：使用 base64 文件源而不是 url 呈现 pdf 文件