JSファイルを動的にロードする3つの方法のまとめ

今回は、JS ファイルを動的にロードする 3 つの方法についてまとめました。JS ファイルを動的にロードする 3 つの方法を使用する際の 注意事項 について、実際のケースを見てみましょう。

1. document.write/writeln() メソッドを使用します

このメソッドは、ドキュメント フローを書き換えることで、ページ全体を再描画します。

document.writeln("<script src=\"http://lib.sinaapp.com/js/jquery/1.6/jquery.min.js\"></script>");

注意する必要があるのは、

特殊文字のエスケープです。

2. jQueryを使用します

getScript(url, callback)メソッドを使用してjsファイルを動的にロードします

$.getScript('test.js',function(){
 alert('done');
});

3. ネイティブjsメソッドを使用します

原則: スクリプトタグを動的に作成し、スクリプトのsrc属性を指定します

function loadJs(url,callback){
 var script=document.createElement('script');
 script.type="text/javascript";
 if(typeof(callback)!="undefined"){
 if(script.readyState){
 script.onreadystatechange=function(){
  if(script.readyState == "loaded" || script.readyState == "complete"){
  script.onreadystatechange=null;
  callback();
  }
 }
 }else{
 script.onload=function(){
  callback();
 }
 }
 }
 script.src=url;
 document.body.appendChild(script);
 }
 loadJs("test.js",function(){
 alert('done');
 });

挿入された親ノードが head タグであることを除いて、同じ原理を使用して CSS ファイルを動的にロードすることもできます。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Vue.jsの計算とリスナープロパティの使用の詳細な説明

JSでロードするjquery.jsメソッドの詳細な説明

以上がJSファイルを動的にロードする3つの方法のまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。