iframes直接使用html代码，没有源码答案

【问题标题】：iframes using directly html code, no sourceiframes直接使用html代码，没有源码
【发布时间】：2012-08-29 23:27:00
【问题描述】：

我想将 HTML 代码嵌入到 html 页面中。 HTML 嵌入代码的样式扰乱了完整的布局，这就是我想使用 iframe 的原因。问题是没有可链接到的 .html 页面，因为此 HTML 代码来自数据库。我尝试过类似的方法：

<iframe>${htmlContent} </iframe>

${htmlContent} 包含一个简单的 html 内容。

<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

【问题讨论】：

你能有第二个页面从数据库中生成 HTML，并通过iframe 的src 链接到它吗？
这是最简单的方法，但不是最好的方法。我宁愿直接用 HTML 代码做一些事情。谢谢
存储的 HTML 有包含<html>标签吗？

标签： html iframe

【解决方案1】：

此答案假定您能够从存储的 HTML 中去除 <html> 和 </html> 标记，并且能够在将其放入标记时使用 HtmlEncode。

将编码后的 HTML 存储到 div 之类的东西中...

<div id="htmlstore" style="display:none;">{html goes here}</div>

所以它看起来像......

<div id="htmlstore" style="display:none;">&lt;body&gt;This is my text&lt;/body&gt;</div>

然后使用下面的 Javsacript，它将“HtmlDecode”（不幸的是没有原生 javascript 函数可以做到这一点）然后放入 iframe

<script type="text/javascript">
  window.onload = function(){
    var html = document.getElementById("htmlstore").innerHTML;
    html = html.replace(/&lt;/g,"<").replace(/&gt;/g,">");
    var frameDoc = document.getElementById("newframe").contentWindow.document;
    frameDoc.documentElement.innerHTML = html;
  }
</script>

【讨论】：

谢谢。这正是我所需要的。但我有两个问题： 1. 通过将由 >即使在显示下，我们也避免这种情况：总体布局不会受到干扰，对吗？ 2. 为什么要去掉标签？即使使用它们，该功能也可以正常工作。谢谢
嗨@布兰卡。是的，HTML 的编码阻止了主页内发生的任何事情，因为如果你不能保证 HTML 的内容，它很容易把事情搞砸。去掉<html> 的原因是我想不出用新的HTML 替换iframe 中的整个结构的方法。我这样做的方法是替换 iframe 的 HTML inin 结构......否则浏览器可能会抱怨有<html><html><body>...</body></html></html>，如果这有意义的话。
我想到了 @Blanca 的其他东西，在这之后你可能不想在 HTML 上运行实际的 HtmlEncode，否则像 &amp;amp; 这样的东西会出现iframe 为&amp;amp;。因此，您可能只想单独转换 < 和 >。要么使用正确的 HtmlDecoding 的 javascript 库，jQuery 将允许你这样做
感谢您的解释。很有帮助