我正在创建一个交互式代码编辑器，它由一个文本框和一个 <iframe> 组成。元素。每当用户在文本框中键入代码时，IFrame 的内容就会被写入并显示 <script> IFrame 内的标记填充有代码文本框的内容，导致用户键入的代码在 IFrame 内运行。每次用户键入时，IFrame 都应重置/重新加载，并使用 IFrame 脚本标记中文本框的新内容再次写入文档，本质上是在键入时自动运行他们键入的任何代码。
但是，在执行此操作时，我注意到命名空间冲突是由于用户在其代码中声明的变量将在 IFrame 刷新之间保留下来而发生的。我通过将插入的代码包装到 IIFE 中来修复此问题，但随后注意到，当用户运行循环然后重新加载 IFrame 两次时，将运行两个循环。
显然，IFrame 的 JavaScript 上下文没有被重置。我已经尝试过答案given here包括使用 .contentWindow.location.reload() 重新加载 IFrame以及使用 .src = "about:blank" 更改 IFrame 源但这些只是重置文档的内容，而不是重置 IFrame JavaScript 上下文 according to these answers如果 IFrame 位于同一域中，则持久化。
Here is the actual code that I am working with (克隆存储库 -> 运行 npm install -> 运行 npm run dev -> 打开 examples/Sandbox/index.html )。
以下是该问题的最小可重现示例(依赖于 ID 为 frame 的 IFrame 元素的存在):
const frame = document.getElementById("frame");
let i = 1;
function updateFrame() {
frame.contentWindow.location.reload();
frame.contentDocument.open();
frame.contentDocument.write(`
<html>
<body>
<script>
(function() {
let a = 0;
function print() {
console.log(${i++} + ": " + a++);
requestAnimationFrame(print);
}
print();
})();
</script>
</body>
</html>
`);
frame.contentDocument.close();
}
updateFrame();
updateFrame();
请注意updateFrame()被调用两次，这应该重新加载 IFrame 的内容，只留下第二个循环运行，但是 print()循环同时打印到控制台，表明上下文在整个重新加载过程中保持不变。
预期的行为是 IFrame 内容和 JavaScript 上下文应在重新加载之间完全重置。在示例中，仅 2: ...应重复打印到控制台，而不是同时打印 1: ...和2: ... 。如何刷新 IFrame，使其 JavaScript 上下文在整个重新加载过程中不保留，并且本质上与手动重新加载页面相同？
最佳答案
创建 IFrame 后，您将无法编辑其源代码，以防止人们使用 IFrame 将代码注入(inject)网站以窃取信息等，或创建包含 IFrame 的虚假网站，其中包含恶意代码以保护域的安全。
您必须通过 AJAX 将编辑器中的更新呈现到 PHP 服务器或 Node.js 等后端，或者完全删除 IFrame 元素并通过
创建一个全新的元素var if = document.createElement("IFRAME");
if.src = /* your code */
var container = document.getElementById("container");
然后在每次需要更新时使用类似的系统删除该项目。
container.innerHTML = "";
关于javascript - 重置/重新加载 IFrame JavaScript 上下文，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59702627/