Question

我已经搜索了好几天，并且想知道是否有人可以帮我解决这个问题。

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

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

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

如果您尝试： -

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

这不起作用并阻止访问，因为iframe被沙盒化并且不允许原点。

沙盒化iframe似乎是阻止Jquery的多个实例的唯一方法“一个在父级上，一个在iframe中”来自冲突，我确实尝试了noConflict似乎可以工作但是这不能解决冲突的多个bootstraps被加载在父元素和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这个特定问题的其他人节省时间，并且在运行时使用错误的方法添加内容。

iframe设置内容

1 个答案: