Question

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

我使用JQuery.load（）将html内容动态加载到模态窗口中，但是html中的脚本标记不会被执行。

下面是我打算加载到模态窗口的html文件。再次，当我使用JQuery.load（＆＃39; /path/filename.html'）加载此文件时，我没有收到任何错误，但脚本标记at不会执行。

<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");
    });
  });

也许我错过了什么。也许它与画布有关。我无法弄明白。有谁知道如何处理这个？

Answer 1

我做了一个谷歌搜索“jquery加载html与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>标签。您必须从html中单独加载JavaScript。您可以使用jQuery的getScript()函数。

如何动态加载p5.js脚本

1 个答案: