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