原理分析: ステップ 1: DOM を使用して <script> タグまたは <link> タグを作成し、それらに type などの属性を付加します。 ステップ 2: appendChild メソッドを使用してタグを別のタグ (通常は <head >) にバインドします。 。 応用： 1. コードの再利用を改善し、コードの量を削減します。 2. JavaScript コントローラーとセッションを追加して、ページ スタイルを動的に変更します。 3. ページはファイルを上から下に順番に読み込み、読み込み中に説明を行うため、たとえば、最初に CSS レイアウト ファイルを読み込み、次に CSS 美化ファイルを表示するなど、ページ ファイルの読み込み順序を制御するための JavaScript コントローラーを追加できます。次に、大きな false ファイルをロードするか、コンテンツの重要性に応じてロードします。 読むヒント: 電子ライティングが苦手な初心者は、中国語を直接読んで、コードをコピーして試してみることができます。 .js または .css ファイルを動的にロードするとは、簡単に言うと、DOM メソッドを使用して、まずおしゃれな新しい「script」または「LINK」要素を作成し、それに適切な属性を割り当て、最後に element.appendChild() を使用することを意味します。要素をドキュメント ツリー内の目的の場所に追加します。実際よりもはるかに複雑に思えます。すべてがどのように行われるかを見てみましょう。 ここに引用があります: loadjscssfile("myscript.js", "js") //ページが開かれると、ブラウザはファイルを動的に読み込みます。 この場合、新しいグローバル配列変数を追加し、バインドされたファイルの名前をその中に保存できます。存在する場合は、存在するかどうかを確認するメッセージが表示されます。 、縛ります。 ここに引用があります: ここに引用があります: さて、次に、状況によっては、追加された .js または .css ファイルを実際に削除または置き換える必要がある場合があります。次に、それがどのように行われるかを見てみましょう。
関数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("javascript.php", "js") // ページが開かれると、ブラウザは動的に「javascript.php」を読み込みます。
loadjscssfile("mystyle.css", "css") //ページが開かれると、ブラウザーは .css ファイルを動的に読み込みます。
次のジョブは、<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") //冗長なファイルのため、ファイルは追加されません
ここでは、続行するかどうかを決定する前に、変数 filesadded に格納されている追加ファイル名のリスト内に、追加するように設定されているファイルが既に存在するかどうかを大まかに検出しています。