Javascript 代码编辑器响应窗口

我在一个网站上工作，这是一个在线代码编辑器。用户可以加载一个页面，在其中键入HTML代码，然后在一个表示已编译网页的小框架中显示（作为web格式）

呈现HTML的框架如下所示：

#responseWindow {
    width: 100%;
    height: 200px;
    background-color: white;
    margin-top: 30px;
    margin-bottom: 30px;
    overflow: auto;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
}

editor.getSession().on('change', function() {
     document.getElementById('responseWindow').innerHTML = editor.getValue();
});

将代码从编辑器传输到响应窗口的Javascript如下所示：

#responseWindow {
    width: 100%;
    height: 200px;
    background-color: white;
    margin-top: 30px;
    margin-bottom: 30px;
    overflow: auto;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
}

editor.getSession().on('change', function() {
     document.getElementById('responseWindow').innerHTML = editor.getValue();
});

通常，键入的所有内容都保留在该框架内，但如果用户提供了一个div固定位置，则文本不会保留在该框架内，而是显示在页面的其他位置。例如：

<p style="top: 100px; right: 10px;">Hello world</p>

你好，世界

那么文本Hello World不在框架中。我的问题是如何为代码创建某种类型的独立空间来呈现？如何让我的用户在框/帧中进行代码渲染，以便他们可以预览它的外观？

将

#responseWindow

设置为

位置：相对

定位元素相对于其最近的定位祖先。现在您的

#responseWindow

的位置是

静态的

，不被认为是“定位的”。

将

#responseWindow

设置为

位置：相对的

---

定位元素相对于其最近的定位祖先。现在你的

#responseWindow

的位置是

静态的

，这不被认为是“定位的”

如果你不知道这样做所涉及的安全风险，你应该意识到这是一个非常糟糕的主意。我愿意解决任何安全风险。如果你不知道这样做所涉及的安全风险，你应该意识到这是一个非常糟糕的主意。我愿意解决任何安全风险。这在某些情况下有效，但如果用户将其内容设置为固定位置会怎么样。然后内容可以从框架中出来？@user2970037是的，定位为

fixed

的元素将始终相对于浏览器的视口进行定位。这在某些情况下有效，但如果用户将其内容设置为固定位置会怎么样。然后内容可以从框架中出来？@user2970037是的，定位为

fixed

的元素将始终相对于浏览器的视口定位。