HTML 代码作为 IFRAME 源而不是 URL

这是 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>
218892 次浏览
小开
最佳答案

您可以使用数据 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属性。

编辑: 另一种方法是使用 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，那么一个技巧就是在所有非 IE/Edge 浏览器中只使用 Srcdoc 聚填料库和“纯”srcdoc 属性(请检查 Caniuse.com)。

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

根据 W3Schools 的说法，HTML5允许你使用 新的“ srcdoc”属性来实现这一点，但是浏览器的支持似乎非常有限。

小开

使用 html5的新属性 srcdoc(srcdoc-polyfill) 医生

<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
小开

Iframe srcdoc: 此属性包含 超文本标示语言内容，它将覆盖 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/"
width="500px"
height="200px"
></iframe>

原始内容取自 Iframes。

小开

我有一个页面，它从 MYSQL 中加载了一个 HTML 主体，我想在一个框架中呈现这个代码，这样它就可以独立于页面的其余部分，并且在特定的边框范围内呈现它自己。

如果 object只是加载一部分数据文本，那么带有未编码的 dataUri 的 object也可以满足您的需要:

HTML <object>元素表示一个外部资源，它可以被视为一个图像、一个嵌套的浏览上下文或者一个由插件处理的资源。

下面的 https://codepen.io/gc-nomade/pen/bgkqvrr 或片段 

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，只要记得上传一次就行了。

HTML Inline Frame 元素(<iframe>)表示嵌套的浏览上下文，将另一个 HTML 页嵌入到当前页中。

下面两个 iframe 都会呈现相同的效果，其中一个需要额外的 javascript。

加载完整文档的示例: https://codepen.io/gc-nomade/pen/JjZeYyg或下面的代码片段

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>


提交答案