jsダイナミックローディングスクリプトとスタイル
13156 ワード
javaScript–ダイナミックロードスクリプトとスタイル
ダイナミックスクリプト/ウェブサイトの需要が大きくなると、スクリプトの需要も徐々に大きくなります.私たちは多くのJSスクリプトを導入して、ステーション全体の性能を低減しなければなりません.
//だからダイナミックスクリプトという概念が出てきました.適時に該当するスクリプトをロードします.
//スタイルは二つの方法でロードされます.一つはラベルで、一つは
ダイナミックスクリプト/ウェブサイトの需要が大きくなると、スクリプトの需要も徐々に大きくなります.私たちは多くのJSスクリプトを導入して、ステーション全体の性能を低減しなければなりません.
//だからダイナミックスクリプトという概念が出てきました.適時に該当するスクリプトをロードします.
1. js
var flag = true;
if(flag){
loadScript('browserdetect.js'); // , ;
}
function loadScript(url){
var script = document.createElement('script'); // script ;
script.type = 'text/javascript'; // type ;
script.src = url; // url;
document.getElementsByTagName('head')[0].appendChild(script); // script ;
}
2. js
var script = document.createElement('script');
script.type = 'text/javascript';
var text = document.createTextNode("alert('Lee')"); // script ;IE ;
script.appendChild(text);
document.getElementsByTagName('head')[0].appendChild(script);
// PS:IE script , ;
// , text ;
function loadScriptString(code){
var script = document.createElement("script");
script.type = "text/javascript";
try{
// IE script , ; ;
script.appendChild(document.createTextNode(code)); // W3C ;
}catch(ex){
script.text = code; // IE ;
}
document.body.appendChild(script);
}
// ;
loadScriptString("function sayHi(){alert('hi')}");
動的なスタイル/ダイナミックなロードスタイルのための表、たとえば、Webサイトの皮膚を切り替える;//スタイルは二つの方法でロードされます.一つはラベルで、一つは
1. link
var flag = true;
if(flag){
loadStyles('basic.css'); // , ;
}
function loadStyles(url){
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = url;
document.getElementsByTagName('head')[0].appendChild(link);
}
2. style
var flag = true;
if(flag){
var style = docuemnt.createElement('style');
style.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(style);
insertRule(document.styleSheets[0],'#box','background:red',0);
}
function insertRule(sheet,selectorText,cssText,position){
// IE;
if(sheet.insertRule){
sheet.insertRule(selectorText+"{"+cssText+"}",position);
// IE;
}else if(sheet.addRule){
sheet.addRule(selectorText,cssText,position);
}
}
// style2
function loadStyleString(css){
var style = document.createElement("style");
style.type = "text/css";
try{
// IE ;