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

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

WBOY

リリース： 2016-05-16 18:23:51

オリジナル

1136 人が閲覧しました

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"); 