2016-05-26 21 views
1

キャンバスアニメーションを表示するモーダルウィンドウを作成しようとしています。アイデアは、明らかに、新しいページを読み込まずにアニメーションを動的にロードすることでこれを行うことです。キャンバスアニメーションは、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"); 
    }); 
    }); 

多分私は何かを逃しています。多分それはキャンバスと関係があります。私はそれを理解できません。誰もこれにアプローチする方法を知っていますか?

+0

通常、どのようにスクリプトsketch.jsを起動しますか?スクリプトをロードするときに通常のwindow.onloadイベントが発生しないため、起動するための自己起動関数を追加する必要があるかもしれません – Blindman67

答えて

0

私は「JavaScriptでjQueryの負荷のhtml」のGoogle検索を行なったし、これらの関連の質問など、結果のトンを、得た:

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()関数を使用できます。

関連する問題