キャンバスアニメーションを表示するモーダルウィンドウを作成しようとしています。アイデアは、明らかに、新しいページを読み込まずにアニメーションを動的にロードすることでこれを行うことです。キャンバスアニメーションは、javascriptファイルから作成されます.p5.jsライブラリ(Web用の処理)を使用します。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イベントが発生しないため、起動するための自己起動関数を追加する必要があるかもしれません – Blindman67