JavaScript's method of dynamically loading scripts and styles
- 2020-05-27 04:27:41
- OfStack
1 dynamic script
When the demand of the website grows, the demand of the script also grows gradually; We had to introduce too many JS scripts that slowed down the performance of the entire site;
So there's this notion of dynamic scripting, loading the script at the right time;
1. Dynamic introduction of js files
var flag = true;
if(flag){
loadScript('browserdetect.js'); // Call a function , The introduction of the path ;
}
function loadScript(url){
var script = document.createElement('script'); // create script The label ;
script.type = 'text/javascript'; // Set up the type attribute ;
script.src = url; // The introduction of url;
document.getElementsByTagName('head')[0].appendChild(script); // will script The introduction of <head> In the ;
}
2. Execute js code dynamically
var script = document.createElement('script');
script.type = 'text/javascript';
var text = document.createTextNode("alert('Lee')"); // Set up the script Label content ;IE complains ;
script.appendChild(text);
document.getElementsByTagName('head')[0].appendChild(script);
// PS:IE The browser thinks script It's a special element , Child nodes can no longer be accessed ;
// In order to compatible , You can use text Properties instead of ;
function loadScriptString(code){
var script = document.createElement("script");
script.type = "text/javascript";
try{
// IE The browser thinks script It's a special element , Child nodes can no longer be accessed ; An error ;
script.appendChild(document.createTextNode(code)); // W3C way ;
}catch(ex){
script.text = code; // IE way ;
}
document.body.appendChild(script);
}
// call ;
loadScriptString("function sayHi(){alert('hi')}");
2 dynamic style
To load stylesheets dynamically, such as by changing the skin of a web site;
Styles can be loaded in one of two ways
<
link
>
Tag,1 is
<
style
>
The label;
1. Dynamic introduction of link files
var flag = true;
if(flag){
loadStyles('basic.css'); // Call a function , The introduction of the path ;
}
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. Execute style code dynamically
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){
// If you are IE;
if(sheet.insertRule){
sheet.insertRule(selectorText+"{"+cssText+"}",position);
// If it is IE;
}else if(sheet.addRule){
sheet.addRule(selectorText,cssText,position);
}
}
// Dynamic execution style2
function loadStyleString(css){
var style = document.createElement("style");
style.type = "text/css";
try{
// IE complains ; Not allowed to <style> Element to add child nodes ;
style.appendChild(document.createTextNode(css));
}catch(ex){
// At this time , Access element StyleSheet attribute , This property has 1 a cssText attribute , Can accept CSS code ;
style.styleSheet.cssText = css;
}
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);
}
// call ;
loadStyleString("body {background-color:red}");