DOM を使用して外部 CSS および JS ファイルを動的にロードし、<script> タグまたは <link> タグを作成し、タイプなどの属性をそれらのタグに付加します。次に、appendChild メソッドを使用して、タグを別のタグ (通常は <head>) にバインドします。
応用：
1. コードの再利用を改善し、コードの量を削減します。
2. JavaScript コントローラーとセッションを追加して、ページ スタイルを動的に変更します。
3. ページはファイルを上から下に順番に読み込み、読み込み中に説明を行うため、たとえば、最初に CSS レイアウト ファイルを読み込み、次に CSS 美化ファイルを表示するなど、ページ ファイルの読み込み順序を制御するための JavaScript コントローラーを追加できます。次に、大きな false ファイルをロードするか、コンテンツの重要性に応じてロードします。
.js または .css ファイルを動的にロードするとは、簡単に言うと、DOM メソッドを使用して、まずおしゃれな新しい「script」または「LINK」要素を作成し、それに適切な属性を割り当て、最後に element.appendChild() を使用することを意味します。要素をドキュメント ツリー内の目的の場所に追加します。実際よりもはるかに複雑に思えます。すべてがどのように行われるかを見てみましょう。
次のジョブは、<head> タグにバインドすることです。バインド時の 1 つの問題は、同じファイルが 2 回バインドされる可能性があることです。ブラウザが 2 回バインドされても例外はありませんが、効率は低くなります。この状況を回避するには、新しいグローバル配列変数を追加し、バインドされたファイルの名前をその中に保存します。存在する場合は、それが存在するかどうかを確認するメッセージが表示されます。存在しないのでバインドします。
| document.getElementsByTagName("head")[0].appendChild(fileref) |
最初にページの HEAD 要素を参照してから appendChild() を呼び出すことにより、新しく作成された要素が HEAD タグの最後に追加されます。さらに、追加によって既存の要素が損なわれることはないことに注意してください。新しい要素 - つまり、loadjscssfile("myscript.js", "js") を 2 回呼び出すと、2 つの新しい "script" 要素が両方とも同じ Javascript ファイルを指すことになります。これは、JavaScript からのみ問題となります。効率の観点から見ると、ページに冗長な要素が追加され、その過程でブラウザの不要なメモリが使用されるため、同じファイルが複数回追加されるのを防ぐ簡単な方法は、loadjscssfile() によって追加されたファイルを追跡することです。ファイルが新しい場合にのみロードします。
| var filesadded="" //バインドされたファイル名を持つ配列変数を保存します function checkloadjscssfile(ファイル名, ファイルタイプ){ if (filesadded.indexOf("["+filename+"]")==-1){//indexOf は配列内に項目があるかどうかを判断します loadjscssfile(ファイル名、ファイルタイプ) filesadded+="["+filename+"]" //filesadded にファイル名を追加します } それ以外 alert("ファイルはすでに追加されました!")//ファイルがすでに存在するかどうかを確認する } checkloadjscssfile("myscript.js", "js") //成功 checkloadjscssfile("myscript.js", "js") //冗長なファイルのため、ファイルは追加されません |
関数loadjscssfile(ファイル名, ファイルタイプ){ if (filetype=="js"){ //ファイルタイプを決定する var fileref=document.createElement('script')//タグを作成 fileref.setAttribute("type","text/javascript")//属性タイプの値を text/javascript として定義します fileref.setAttribute("src", filename)//ファイルのアドレス } else if (filetype=="css"){ //ファイルタイプを決定する var fileref=document.createElement("リンク") fileref.setAttribute("rel", "スタイルシート") fileref.setAttribute("タイプ", "テキスト/CSS") fileref.setAttribute("href", ファイル名) } if (ファイル参照名の種類!="未定義") document.getElementsByTagName("head")[0].appendChild(fileref) } loadjscssfile("myscript.js", "js") //ページが開かれると、ブラウザはファイルを動的に読み込みます。 loadjscssfile("javascript.php", "js") // ページが開かれると、ブラウザは動的に「javascript.php」を読み込みます。 loadjscssfile("mystyle.css", "css") //ページが開かれると、ブラウザーは .css ファイルを動的に読み込みます。 |