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不会重新加载自身并且不显示任何内容（只是一个空白的白色画布）。

如果我尝试不同的方法并更改脚本标记的文本属性，请执行以下操作：

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

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

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

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

问候

Answer 1

只要<?php echo(($content->pfile()->toFile()->url())) ?>将url返回到您的脚本，您的第一种方法就应该如果 iframe实际完成加载。它可能不可以完成这个事件（我很遗憾地不知道它发生了什么情况 - 但它会发生），这可能就是你的方法无法运作的原因。

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

现在，您的第二种方法将失败，因为您已将目标脚本文件的源代码插入<script>，这将失败，因为您没有转义'或{ {1}}，以及错误告诉你的内容（通过在行尾使用\n可以在JS中破坏字符串）。如果我是你，我不会尝试这种方法（但是，如果你至少逃脱这两个角色它会起作用，我不知道你可能遇到的其他警告）。

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

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

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

添加javascript文件后刷新iframe？

1 个答案: