javascript - 添加 javascript 文件后刷新 iframe 吗？

Question

为了解释这个问题，这里有一个简短的上下文描述:

我正在为学生在学期中进行的编程工作构建项目微型网站。为了展示工作(在处理 p5js 中完成)，我想使用运行脚本的 Iframe。

为此，我按照此处描述的方式进行了操作: https://github.com/processing/p5.js-website/blob/master/js/examples.js#L133

因为文件来自后端，所以我这样做:我创建一个 iframe，然后我想向其中添加脚本文件。然而它没有渲染任何东西。

<div class="col-sm-7 middle-col col-sm-offset-3">

    <iframe id="uid" width="100%" height="500" src="assets/p5/p5-iframe-template.html"></iframe>

  <script> 
    var iframe = document.getElementById("uid");

    iframe.onload = function() {
       var userScript = iframe.contentWindow.document.createElement('script');
       userScript.type = 'text/javascript';
       userScript.src = '<?php echo(($content->pfile()->toFile()->url())) ?>';
       userScript.async = false;
       iframe.contentWindow.document.body.appendChild(userScript);
    };
  </script>
</div>

现在的问题是，如果我获取文件的 url 并将其附加，似乎 iframe 不会重新加载本身，并且不会显示任何内容(只是一个空白的白色 Canvas )。

如果我尝试不同的方法并更改脚本标记的文本属性，如下所示:

userScript.text = '<?php echo(($content->pfile()->toFile()->content())) ?>';

我将收到如下所示的 Javascript 错误:

无论采用哪种方式，我都找不到解决方案。我尝试通过更改 Iframe 的 src 属性来刷新它，但这似乎不起作用？ 也许你可以帮我。

我已经阅读并尝试过的相关帖子: Creating an iframe with given HTML dynamically

问候

Answer 1

只要<?php echo(($content->pfile()->toFile()->url())) ?>返回 url 到您的脚本，您的第一种方法应该有效如果 iframe 实际完成加载。它可能根本不运行该事件(遗憾的是，我不知道它在什么情况下发生 - 然而它发生了)，这可能就是你的方法不起作用的原因。

您可以尝试通过访问readyState来手动检查iframe是否已加载。属性:iframe.contentWindow.document.readyState并检查它是否是 interactive或complete然后运行添加 <script>在 iframe 内。

现在，您的第二种方法将失败，因为您要将目标脚本文件的源代码插入到 <script> 中。 ，这会失败，因为你没有转义 '或\n ，这就是错误告诉您的内容(在 JS 中可以通过在行尾使用 \ 来中断字符串)。如果我是你，我不会尝试这种方法(但是，是的，如果你至少转义这两个字符，它会起作用，但我不知道你可能会遇到什么其他警告)。

您可以尝试将源代码附加在 <script type='template-or-whatever-really-as-long-its-not-text/javascript'><?php echo(($content->pfile()->toFile()->content())) ?></script> 中然后将脚本从文档中的脚本移动到通过 innerHTML 在 iframe 中创建的脚本.

当然，如果 iframe 没有触发 onload 事件，那就没什么意义了，所以我会先看看。

啊，我现在注意到的另一件事 - 在第一个屏幕截图中，您正在访问相对路径，但在第二个屏幕截图中，iframe 的路径是绝对路径；因此问题可能是 CORS - 在这种情况下，当触发 onload 事件时，您将无法向加载的文档添加任何脚本。