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

今回は、JS ファイルを動的にロードするための 3 つの方法を紹介します。JS ファイルを動的にロードするための 注意事項 は何ですか?

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 サイトの他の関連記事に注目してください。

推奨読書:

JS ファイルを動的に導入する方法

H5 での data-* 属性の使用方法のまとめ

JS の同期、非同期、遅延読み込みの実装方法

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