javascript - iframe设置内容

Question

我已经搜索这个问题好几天了，想知道是否有人可以帮助我找到这个问题的答案。

所以，我目前正在构建一个系统，允许用户创建 html 页面，其中可以包含 css 和 js 链接，并且可能包含内联脚本/样式。

我希望用户预览他们的输出，我最初使用 div 标签并向其中添加 html 输出，但由于所有额外的样式和脚本也影响父页面，我决定唯一的选择可能是使用iframe 将内容放入其中。

为了停止引导链接和 Jquery 与父元素的冲突，我需要在沙箱环境中运行 iframe，但我不知道如何在沙箱模式下设置 iframe 的内容。

如果你尝试:-

$("示例 iframe 元素").contents().find("body").html("示例 html 内联样式等");

这不起作用，并且由于 iframe 被沙箱化并且不允许来源而阻止访问。

对 iframe 进行沙箱处理似乎是阻止多个 Jquery 实例“一个在父级，一个在 iframe 中”发生冲突的唯一方法，我确实尝试了 noConflict，这似乎有效，但并不能修复正在加载的冲突的多个 Bootstrap 在父元素和 iframe 元素中。

有谁知道如何在运行时将内容添加到沙盒中的 iframe 而不会阻止访问或我可以使用不同的独特容器方法？

我感谢任何人可以就此提供的任何帮助或指导，因为我无法真正找到有关它的太多信息。

Answer 1

我终于发现了这种情况的问题所在，我不需要沙盒 iframe，因为我现在知道为什么 Jquery 和 Bootstrap 会发生冲突，而无需沙盒 iframe。我看到很多帖子告诉您使用下面的代码将内容放入 iframe 中。

$("example iframe element").contents().find("body").html("example html inline styles etc");

上述方法的问题在于它打开了 iframe 以将内容放入其中，但没有指定关闭 iframe。

这就是为什么即使在正常的非沙盒 iframe 上，Jquery 和 Bootstrap 也会发生冲突，因为它会因未关闭而泄漏回您的父页面。直接将内容放入 iframe 的真正方法应该是下面的代码，因为它确保连接正确关闭。

var myIframe = document.getElementById("ID OF THE IFRAME")
var iframeDoc = myIframe.contentWindow.document;
iframeDoc.open();
iframeDoc.write("HTML HERE");
iframeDoc.close();

通过执行上述代码，您不仅可以修改 iframe 内的内容，还可以在完成内容编写后将其关闭。这对于确保 Iframe 坚持其作为完全隔离的页面元素的目的非常重要，并且它可以阻止 js 和 css 泄漏到您的父页面中。

我希望这个答案有助于为遇到 iframe 特定问题并在运行时使用错误方法添加内容的其他人节省时间。