QA@IT

スクリプトを動的に読み込む方法とは

6618 PV

var script = document.createElement( 'script' );
は何を意味しているのかを検索した際に、
「スクリプトを動的に読み込む方法」というものが多くでできて、
そもそも「スクリプトを動的に読み込む」ということがどういうことなのかがわかりません。
その後下のような説明が続いていました。

スクリプトを動的に読み込むには、script要素をスクリプトで作成し、
それをドキュメントに追加します。それは次のようになります。
var script = document.createElement( 'script' );

script.type = 'text/javascript';
script.src = filename;

var firstScript = document.getElementsByTagName( 'script' )[ 0 ];
firstScript.parentNode.insertBefore( script, firstScript );

となり、結局何を意味しているのかがいまいち理解できませんでした。
基礎的なことではなりますが、もしわかる方がいらっしゃいましたら回答よろしくお願いします。

回答

結局何を意味しているのかがいまいち理解できませんでした。

JavaScript のコードの意味は、動的に新しい script 要素を生成し DOM に追加しているのですが、そこのところの理解は OK でしょうか? 詳しい説明不要かもしれませんが、以下に書いておきます:

(1) 1 行目で新しい script 要素を生成し、

(2) 2, 3 行目で生成した script 要素の type 属性を text/javascript に src 属性を filename(.js ファイルの URL)に設定し、

(3) 4 行目で DOM の中の既存の script 要素の最初の要素を見つけて、

(4) 5 行目で (3) で見つけた既存の script 要素の前に (2) で生成した新しい script 要素を追加。

このようにすると、(4) の新しい script 要素を DOM に追加した時点で、ブラウザは src 属性に設定された URL の .js ファイルを GET 要求します。

URL で指定されたサーバーのフォルダに .js ファイルが存在し、アクセス権に問題がなければ、サーバーは .js ファイルを応答としてブラウザに返します。

結果、ブラウザで「スクリプトを動的に読み込む」という操作が完了します。

何のためにこういったことをするかというと、典型的な例としては JSONP(JSON with Padding・・・script タグを使用してクロスドメインでデータを取得する仕組み)があります。

JSONP
https://ja.wikipedia.org/wiki/JSONP

興味がありましたら JSONP でググってみてください。他にも多々参考になる記事がヒットするはずです。

ご自分でも実装してみると理解が深まると思います。jQuery.ajax を使うとかなり簡単にできます。

jQuery.ajax で JSONP
http://surferonwww.info/BlogEngine/post/2017/05/03/jsonp-by-using-jquery-ajax.aspx

編集 履歴 (0)
ウォッチ

この質問への回答やコメントをメールでお知らせします。