如何动态加载 p5.js 脚本 [重复]答案

【问题标题】：How to load a p5.js script dynamically [duplicate]如何动态加载 p5.js 脚本 [重复]
【发布时间】：2016-05-26 03:28:48
【问题描述】：

我正在尝试创建一个显示画布动画的模式窗口。这个想法显然是在不加载新页面的情况下执行此操作，并动态加载动画。画布动画是从 javascript 文件创建的 - 使用 p5.js 库（网络处理）。

我使用 JQuery.load() 将 html 内容动态加载到模态窗口中，但该 html 中的脚本标签没有被执行。

下面是我打算加载到模式窗口中的 html 文件。再一次，当我使用 JQuery.load('/path/filename.html') 加载这个文件时，我没有收到任何错误，但是脚本标签没有执行。

<div id="sketchContainer" class="sketchContainer">



</div>

<script type="text/javascript" src="p5sketch/sketch.js"></script>

下面是处理 .load() 请求的 JavaScript。

function loadData() {

  $('.projectBlock').load("modalContent.html", function() {
    console.log("load html was performed");
    $.getScript("p5sketch/sketch.js", function(data, textStatus, jqxhr) {
      console.log(data);
      console.log(textStatus);
      console.log(jqxhr.status);
      console.log("load sketch was performed");
    });
  });

也许我错过了什么。也许它与画布有关。我就是想不通。有谁知道如何解决这个问题？

【问题讨论】：

你通常如何启动脚本sketch.js？？也许您需要添加一个自调用函数来启动它，因为加载脚本时不会触发任何正常的 window.onload 事件

标签： javascript jquery ajax canvas p5.js

【解决方案1】：

我在谷歌上搜索了“jquery load html with javascript”，得到了很多结果，包括这些相关问题：

jQuery .load() call doesn't execute javascript in loaded html file

jQuery .load() / .ajax() not executing javascript in returned HTML after appended

根据这些问题的答案，jquery 正在剥离 <script> 标记。您必须将 JavaScript 与 html 分开加载。您可以为此使用 jQuery 的 getScript() 函数。

【讨论】：