有没有办法在没有 iFrame 的情况下加载完整的 HTML 代码？答案

【问题标题】：Is there a way to load full HTML code without iFrame?有没有办法在没有 iFrame 的情况下加载完整的 HTML 代码？
【发布时间】：2018-03-22 17:26:01
【问题描述】：

我正在编写一个预览功能，让用户预览他们上传的 HTML 文件并进行一些小的编辑。 HTML 文件将不包含 Javascript 和外部 CSS。所有 CSS 要么在样式标签内，要么在内联。另一方面，图像将始终是外部的，因为我们不提供存储图像的空间。

iFrame 不是一个好的解决方案，因为：

预览是在实际保存内容之前进行的，所以我无法提供 iFrame 加载页面的 URL。
很难触摸 iFrame 内的元素。由于用户将在另一个显示纯 HTML 的文本框中进行小幅更新，因此我需要经常更新里面的元素。

但是，如果我只是将内容插入<div>，重复的<html>、<head> 和<body>tag 将使页面崩溃。

那么，有没有一种方法可以在没有 iFrame 的情况下预览 HTML？

【问题讨论】：

也许解决方案是仅在<div> 中显示html 文件内容，而不显示<html>、<head> 和<body> 标签并将它们仅添加到文件中以供上传？还是在新窗口中完全显示要上传的文件？
这个项目本身已经听起来像是我宁愿避免的事情。根据您的问题，我强烈建议您不要放弃 iframe。如果你真的内联内容，你至少应该用<object>the html content</object> 包装它，如果你真的想避免 iframe 进行样式重置。仍然。这个概念本身就已经很奇怪了。
重复的 html 和 head 元素以什么方式“崩溃页面”？浏览器通常会默默地忽略那些额外的元素，除非在极少数情况下。

标签： html css iframe

【解决方案1】：

如果您不想让主应用影响预览的样式，则需要使用 iframe。你看到 iframe 的内容窗口了吗？ https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/contentWindow。这可能是您正在寻找的答案。所以基本上在这里你尝试访问你的 iframe 的 DOM。试试看！

preview = getYourIframeDom();
code = getYourHtmlCodeHere();
preview.contentWindow.document.open("text/html","replace");
preview.contentWindow.document.write(code);
preview.contentWindow.document.close();

【讨论】：