重置/重新加载IFrame JavaScript上下文

我正在创建一个交互式代码编辑器，它由一个文本框和一个

元素组成。每当用户在文本框中键入代码时，IFrame的内容都会写入，并且IFrame内的

标记会填充代码文本框的内容，从而导致用户键入的代码在IFrame内运行。每次用户键入时，应重置/重新加载IFrame，并使用IFrame脚本标记中文本框的新内容再次写入文档，基本上是在键入时自动运行他们键入的任何代码

但是，在执行此操作时，我注意到名称空间冲突是由于用户在代码中声明的变量将在IFrame刷新之间持久化而产生的。我通过将插入的代码包装到IIFE中解决了这一问题，但随后注意到，当用户运行一个循环，然后两次重新加载IFrame时，两个循环将运行

显然，IFrame的JavaScript上下文没有被重置。我尝试过的答案包括使用

.contentWindow.location.reload（）

重新加载IFrame，以及使用

.src=“about:blank”

更改IFrame源代码，但这些只是重置文档的内容，而不是IFrame JavaScript上下文，如果IFrame位于同一域上，则会保留该上下文

（克隆存储库->运行

npm安装

->运行

npm运行开发

->打开

examples/Sandbox/index.html

）

以下是该问题的最小可再现示例（取决于ID为

frame

的IFrame元素的存在）：

const frame=document.getElementById（“frame”）；
设i=1；
函数updateName（）{
frame.contentWindow.location.reload（）；
frame.contentDocument.open（）；
frame.contentDocument.write(`
（功能（）{
设a=0；
函数打印（）{
log（${i++}+”：“+a++”）；
请求动画帧（打印）；
}
打印（）；
})();
`);
frame.contentDocument.close（）；
}
updatename（）；
updatename（）；

请注意，

updateFrame（）

被调用两次，这将重新加载IFrame的内容，只留下第二个循环运行，但是两个

print（）

循环同时打印到控制台，表明在整个重新加载过程中上下文保持不变

---

预期的行为是IFrame内容和JavaScript上下文应该在重新加载之间完全重置。在本例中，只应将

2:…

重复打印到控制台，而不是同时将

1:…

和

2:…

打印到控制台。如何刷新IFrame，使其JavaScript上下文在整个重新加载过程中保持不变，基本上与手动重新加载页面相同？

一旦创建IFrame，您不能编辑其源代码，以防止有人使用iFrame向网站中注入代码，以窃取信息等，或创建虚假网站，这些网站的iFrame包含恶意代码，以确保域的安全

您必须通过AJAX将更新从编辑器呈现到后端，如PHP服务器或node.js，或者完全删除IFrame元素，并通过

var if = document.createElement("IFRAME");
if.src = /* your code */
var container = document.getElementById("container");

然后，每次需要更新时，使用类似的系统删除该项

container.innerHTML = "";

---

谢谢，这很有效！安全性不是一个问题，因为它是一个完全的客户端沙箱，只适用于用户自己的会话。我还希望避免使用服务器，以尽可能减少占用空间和延迟。再次感谢你的回答！