web-dev-qa-db-ja.com

「onclick」イベント中に外部Javascriptファイルをロードする方法は？

HTMLに2つのdivがあります。

<div id="div1"></div>
<div id="div2"></div>

「div2」をクリックすると、外部のJavaScriptファイルをロードしたいので、たとえば「 https://abcapis.com/sample.js 」と言います。

以下のようなonclickイベントにJSファイルを含めてみましたが、

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://abcapis.com/sample.js"; 
document.getElementsByTagName("head")[0].appendChild(script);

これには、ヘッドセクションにスクリプトタグが含まれていましたが、スクリプトタグはページの読み込み時にのみ読み込まれるため、読み込まれませんでした（私が間違っている場合は、ここで修正してください）。

私が進めることができる他の方法はありますか？.

前もって感謝します。

javascriptjqueryhtmljspdojo
12
Abu

JQueryの$ .getScript（）関数を使用することで、作業が完了するはずです。

http://api.jquery.com/jQuery.getScript/

以下はサンプルコードの一部です。

$("button").click(function(){
  $.getScript("demo_ajax_script.js");
});

JQueryを使用していない場合は、AJAXを使用してページに新しいスクリプトを動的にロードする方法を学習する必要があります。

20
tremor

コードはほとんど機能します。 .setAttributeを使用する必要があります。これが私の作業コードです。スクリプトとしてjQueryを使用しました。

var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', 'jquery.min.js');
document.head.appendChild(script);

そして、それはそれをします。

編集：

いくつかの詳細。 script.type = 'text/javascript'のようなことをすると、オブジェクトにプロパティを設定しますが、これは必ずしもそのプロパティを実際のノード属性に関連付けることと同じではありません。

9
rescuecreative

JQueryを使用していますか？もしそうなら、あなたは $。getScript（） を試すことができます。

これもチェックしたいかもしれません answer 。しかし、基本的には、次のようなことができます：

<a href='linkhref.html' id='mylink'>click me</a>
<script type="text/javascript">
    var myLink = document.getElementById('mylink');

    myLink.onclick = function(){

        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "Public/Scripts/filename.js."; 
        document.getElementsByTagName("head")[0].appendChild(script);
        return false;
    }
</script>
2
Simon Walsh
$("button").click(function(){
  $.getScript("demo_ajax_script.js");
});

私が見逃した情報は、パスは絶対的でなければならないということでした。

1
Marius Seack