JavaScript dynamic loading script and style method, javascript script

JavaScript dynamic loading script and style method, javascript script

A dynamic script

When the demand for websites increases, the demand for scripts gradually increases. We have to introduce too many JS scripts to reduce the performance of the entire site;
Therefore, the concept of dynamic scripts is introduced, and corresponding scripts are loaded at the right time;

1. dynamically introduce js files

Var flag = true; if (flag) {loadScript ('browserdetect. js '); // call the function and introduce the path;} function loadScript (url) {var script = document. createElement ('script'); // create a script tag; script. type = 'text/javascript '; // set the type attribute; script. src = url; // introduce url; document. getElementsByTagName ('head') [0]. appendChild (script); // introduce the script into 
2. dynamically execute js Code
Var script = document. createElement ('script'); script. type = 'text/javascript '; var text = document. createTextNode ("alert ('lil')"); // sets the script TAG content; IE reports an error; script. appendChild (text); document. getElementsByTagName ('head') [0]. appendChild (script); // PS: the IE browser considers the script as a special element and cannot access subnodes. // for compatibility, the text attribute can be used instead. function loadScriptString (code) {var script = document. createElement ("script"); script. type = "text/javascript"; try {// The IE browser considers the script as a special element and cannot access subnodes. An error is returned. script. appendChild (document. createTextNode (code); // W3C method;} catch (ex) {script. text = code; // IE Method;} document. body. appendChild (script) ;}// call; loadScriptString ("function sayHi () {alert ('Hi ')}");
2. Dynamic Style
To dynamically load style sheets, such as switching the website skin;
There are two ways to load a style: <link> label and <style> label;
1. dynamically introduce link files
Var flag = true; if (flag) {loadStyles('basic.css '); // call the function and introduce 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. dynamically execute the style code
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 it is not IE; if (sheet. insertRule) {sheet. insertRule (selectorText + "{" + cssText + "}", position); // if it is IE;} else if (sheet. addRule) {sheet. addRule (selectorText, cssText, position );}}
// Dynamically execute the style2 function loadStyleString (css) {var style = document. createElement ("style"); style. type = "text/css"; try {// IE: an error is returned. You cannot add subnodes to the <style> element. style. appendChild (document. createTextNode (css);} catch (ex) {// at this time, access the element's StyleSheet attribute, which has a cssText attribute that can accept CSS code; style.styleSheet.css Text = css ;} var head = document. getElementsByTagName ("head") [0]; head. appendChild (style) ;}// call; loadStyleString ("body {background-color: red }");