外部JavaScript/Cssファイルのコードを動的に読み込み/削除/更新_JavaScriptスキル

JavaScript/Csss ファイルの動的ロード
外部 JavaScript (*.js) または Css (*.css) ファイルをロードする従来の方法は、それらを タグに直接追加することです。 >

コードをコピーします コードは次のとおりです:

これらのファイルは、この方法で現在のページに同期的に読み込まれます。

JavaScript/Css ファイルを動的に読み込みます:

DOM の createElement メソッドを使用して「script」または「link」要素を作成します
対応する属性を設定します
appendChild メソッドを使用し、挿入しますhead タグの最後に作成された要素




コードをコピーします

コードは次のとおりです: function loadjscssfile(filename, filetype){ //ファイルタイプが .js の場合、スクリプトタグを作成し、対応する属性を設定します

if (filetype=="js"){

var fileref =document.createElement('script');
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", ファイル名); /if file タイプが .css の場合、スクリプト タグを作成し、対応する属性を設定します。
else if (filetype=="css"){
var fileref=document.createElement("link"); >fileref.setAttribute( "rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", "ファイル名");
if ( typeof fileref!="unknown")
document.getElementsByTagName("head")[0].appendChild(fileref);
}
//.js ファイルを動的に追加します
loadjscssfile("myscript .js", "js");
//.js ファイルを追加するのと同じように .php ファイルを動的に追加します
loadjscssfile("javascript.php", "js"); >//動的 1 つの .css ファイル
loadjscssfile("mystyle.css", "css");



同じ js/css ファイルが複数ロードされるのを防ぐため




コードをコピー

コードは次のとおりです:

//一時的にロードされたファイル名var filesadded=""; function checkloadjscssfile(filename, filetype){ if (filesadded.indexOf("[" filename "]") ==-1){ loadjscssfile( filename, filetype); //[ファイル名] をファイルに保存しますadded

filesadded ="["

}
else{
alert("ファイルはすでに追加されました!" );
}

//初めてロードします
checkloadjscssfile("myscript.js", "js");同じファイルを繰り返しロードして失敗しました
checkloadjscssfile("myscript.js", "js");



JavaScript/Csss ファイルの動的削除
注: ie6/7 でスタイルを動的に削除する場合のバグ 2 種類 解決策: 1. スタイル シートにインポート スタイル シートを含めないでください。 2. リンクの type 属性を null 値に設定してから、href の場所を直接変更します。 href を null に設定し、最後に type 値を "text/css" に設定すると、IE は新しいスタイル シートを強制的に解釈します。

対応する DOM 要素を取得します
ファイル名とファイルの種類に応じて要素を見つけます
DOM RemoveChild を使用して「script」または「link」要素を削除します

コードをコピー


コードは次のとおりです:


function Removejscssfile(filename, filetype){

//ファイルの種類を判断しますvar targetelement=(filetype == "js")? "script" : (filetype=="css") "link" : "none"; //ファイル名を判定しますvar targetattr =(filetype=="js") ? "src" : (filetype=="css")? "href" : "none";要素を削除し、一致する要素を削除しますfor (var i=allsuspects.length; i>=0; i--){ if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(filename)!=-1) allsuspects[i].parentNode.removeChild(allsuspects[i]);

removejscssfile("somescript.js ", "js");
removejscssfile("somestyle.css", "css");



JavaScript/Css ファイルを動的に更新します
createElement を使用して JavaScript/Css 要素を作成します
置換する要素を見つけます
要素を replaceChild に置き換えます




コードをコピーします


コードは次のとおりです:

function createjscssfile(filename, filetype){
if (filetype=="js"){ //if filename is a external JavaScript file
var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")
fileref.setAttribute("src", filename)
}
else if (filetype=="css"){ //if filename is an external CSS file
var fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", filename)
}
return fileref
}

function replacejscssfile(oldfilename, newfilename, filetype){
var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none";
var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none";
var allsuspects=document.getElementsByTagName(targetelement);
for (var i=allsuspects.length; i>=0; i--){
if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(oldfilename)!=-1){
var newelement=createjscssfile(newfilename, filetype);
allsuspects[i].parentNode.replaceChild(newelement, allsuspects[i]);
}
}
}
//用 "newscript.js" 替换 "oldscript.js"
replacejscssfile("oldscript.js", "newscript.js", "js")；
//用 "newscript.css" 替换 "oldscript.css"
replacejscssfile("oldstyle.css", "newscript.css","css");