在线 HTML 编辑器如何防止来自无效用户代码的错误？

Question

我已经构建了一个基于浏览器的 HTML/Markdown 代码编辑器，它在大多数情况下似乎工作得很好。当用户更新代码等时，我有实时渲染预览。我已经清理了任何 <script> 标签，但允许使用其他元素，例如 <div> 或 <style>。

问题是如果用户使用无效的 HTML 保存文档（即未关闭的<style> 标签等），在重新加载文档时，由于我的 HTML 元素被用户代码中的未闭合标签。

问题：是否有可靠的策略在隔离容器中呈现用户代码，以使该容器内的错误不会渗入页面的其余部分？

我正在使用带有 React 的 Javascript。这似乎是 iFrame 的一个用例，但我已经意识到 iFrame 从来没有是一个好主意，并且总是有更好的方法来做你想做的事想做。

Answer 1

iframe 是此类问题的完美解决方案。过度使用它们可能是页面上的一个问题，但在这种情况下，它是完成这项工作的正确工具。

也不知道为什么会被打到你身上，frame 标签总是不好，但 iframes 谨慎使用很有用。