今回はJSファイルを動的にロードする方法についてまとめてみました。JSファイルを動的にロードする際の注意点について、実際の事例を見てみましょう。 1. document.write/writeln() メソッドを使用します このメソッドは、ドキュメント フローを書き換えることで、ページ全体を再描画します。 実装方法: コードをコピーコードは次のとおりです: document.writeln("");</p> <p style="text-align: left;">注意が必要なのは、<a href="http://www.php.cn/wiki/88.html" target="_blank">特殊文字</a>のエスケープです。 </p> <p style="text-align: left;"><strong>2. jQueryを使用します</strong></p> <p style="text-align: left;">getScript(url, callback)メソッドを使用してjsファイルを動的にロードします</p> <pre>$.getScript('test.js',function(){ alert('done'); });</pre> <p style="text-align: left;"><strong>3. ネイティブjsメソッドを使用します</strong></p> <p style="text-align: left;">原則: スクリプトタグを動的に作成し、スクリプトのsrc属性を指定します</p> <pre>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'); });</pre> <p> この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 </p> <p>推奨読書: </p> <p style="text-align: left;"><a href="http://www.php.cn/js-tutorial-395225.html" target="_blank">webpack+myproject でプロジェクトをビルドするときに IP にアクセスできない場合の対処方法</a><br></p> <p style="text-align: left;"><a href="http://www.php.cn/js-tutorial-395511.html" target="_blank">これは call と apply の使用を指します</a><br></p> <p style="text-align: left;"><a href="http://www.php.cn/js-tutorial-395215.html" target="_blank">webpack vue プロジェクト開発環境 LAN バインディングIP方式</a><br></p>
