javascript - 重置/重新加载 IFrame JavaScript 上下文-6ren

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

转载作者：行者123 更新时间：2023-12-02 22:06:24

25

4

我正在创建一个交互式代码编辑器，它由一个文本框和一个 <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();

See on JSFiddle .

请注意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/

25

4

0

文章推荐： javascript - 为什么在 React 中运行 npm start 时出现错误？

文章推荐： dynamics-crm - Microsoft Dynamic CRM 插件调试

node.js - Chrome 的跟踪事件分析工具中的自上而下(树)、自上而下(重)和自下而上(重)有什么区别
我正在尝试使用谷歌浏览器的 Trace Event Profiling Tool分析我正在运行的 Node.js 应用程序。选择点样本后，我可以在三种 View 之间进行选择: 自上而下(树) 自上而
android - 重 ContentProvider 查询和 ListView
对于一个可能是菜鸟的问题，我们深表歉意，但尽管在 SO 上研究了大量教程和其他问题，但仍找不到答案。我想做的很简单:显示一个包含大量数据库存储字符串的 Android ListView。我所说的“很
css - 基础 5 div 重
我已经开始了一个新元素的工作，并决定给 Foundation 5 一个 bash，看看它是什么样的。在创建带有水平字段的表单时，我在文档中注意到的第一件事是它们使用大量 div 来设置样式。所以我在下
.net - 重 CPU 负载下的跨线程 BeginInvoke 阻塞
我有一个 Windows 窗体用户控件，其中包含一个使用 BeginInvoke 委托(delegate)调用从单独线程更新的第 3 方图像显示控件。在繁重的 CPU 负载下，UI 会锁定。当我附加
javascript - 什么是测试 Dom 重 js 的好方法？
我有一堆严重依赖dom元素的JS代码。我目前使用的测试解决方案依赖于 Selenium ，但 AFAIK 无法正确评估 js 错误(addScript 错误不会导致您的测试失败，而 getEval 会
Java Swing 重/慢 paintComponent - 有什么建议吗？
我正在制作一款基于滚动 2D map /图 block 的游戏。每个图 block (存储为图 block [21][11] - 每个 map 总共 231 个图 block )最多可以包含 21 个
javascript - 在网页上 - 如何显示(轻)图像并在客户端下载后者时将其替换为(重)图像？
考虑到以下情况，我是前端初学者: 某个 HTML 页面应该包含一个沉重的图像(例如 - 动画 gif)，但我不想强制客户缓慢地等待它完全下载才能享受一个漂亮的页面，而是我更愿意给他看一个轻量级图像(例
python - 重 I/O 和 python 多处理/多线程
我正在设计一个小软件，其中包括: 在互联网上获取资源，一些用户交互(资源的快速编辑)，一些处理。我想使用许多资源(它们都列在列表中)来这样做。每个都独立于其他。由于编辑部分很累，我想让用户(可能
c# - 重 I/O 操作中的 Parallel.ForEach 与异步 For 循环
我想比较两个理论场景。为了问题的目的，我简化了案例。但基本上它是您典型的生产者消费者场景。 (我关注的是消费者)。我有一个很大的Queue dataQueue我必须将其传输给多个客户端。那么让我们
python - K 重 CV 的变体，其中 size(test_set) > N/K
我有一个二元分类问题，标签 0 和 1(少数)存在巨大不平衡。由于测试集带有标签 1 的行太少，因此我将训练测试设置为至少 70-30 或 60-40，因此仍然有重要的观察结果。由于我没有过多地衡量准

首页

博学

6Ren·AI

商城

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