JavaScript dynamic load scripts and styles

a Dynamic loading js

Dynamic Loading JS the necessity of:

1. the larger the project, the large number of JS introduced will lead to performance problems;

2. actual project may encounter: need to refer to another js file in a JS file function, but another function has no way in the page through the <script> label loading.

There are about three ways to read several blogs online:

1, Direct document.write
<script language= "JavaScript" >
document.write ("<script src= ' jiaxiangjun.js ' ></script>");
</script>

2. Dynamically change the SRC attribute of the existing script
<script src= "id=" JXJ "></script>
<script language= "JavaScript" >
Jxj.src= "Jiaxiangjun.js"
</script>

3. Dynamic creation of script elements
<script>
var Headtag = document.getelementsbytagname (' HEAD '). Item (0);
var myscript= document.createelement ("script");
Myscript.type = "Text/javascript";
Myscript.src= "Jiaxiangjun.js";
Headtag.appendchild (MyScript);

The basic principle is to use Dom Dynamic Introduction JS to the destination file.

There is also a way to provide a common insert Script Label method, accept the ordinary JS code as a parameter that can be executed dynamically JS the effect :

var myscript = document.createelement (' script ');

Myscript.type = ' Text/javascript ';

var text =document.createtextnode ("alert (' Jxj ')"); Set script tag content ; IE will error ;

Myscript.appendchild (text);

document.getElementsByTagName (' head ') [0].appendchild (MyScript);

//IE Browser thinks Script is a special element , child nodes can no longer be accessed ;

    // for compatibility , can use text attribute to replace ;

Functionloadscriptstring (code) {

Varscript = document.createelement ("script");

Script.type = "Text/javascript";

Try

{

//IE Browser thinks Script is a special element , child nodes can no longer be accessed ; Error ;

script.appendchild (document.createTextNode (code)); // Way ;

}

catch (ex)

{

script.text = code; //

}

Document.body.appendChild (script);

}

    // called ;

Loadscriptstring ("function Sayhi () {alert (' Hi ')}");

 two  Dynamic Styles

for some projects to put forward the special interface needs we often have to achieve a number of skin style switch, such as I now do the network management system, platform two styles, specific products also have their own style; hehe. In order to implement these functions, we want to implement dynamic loading styles.

Common styles are loaded in two ways, one is <link> tags, the other is <style> tags;

1. dynamically introducing the link file

var flag =true;

if (flag) {

loadstyles (' basic.css '); // Calling public functions , introduced CSS Path ;

}

Functionloadstyles (URL) {

Varlink = document.createelement (' link ');

Link.rel = ' stylesheet ';

Link.type = ' text/css ';

Link.href = URL;

document.getElementsByTagName (' head ') [0].appendchild (link);

}

2. Dynamic Execution of style code

var flag =true;

if (flag)

{

Varstyle = docuemnt.createelement (' style ');

Style.type = ' text/css ';

document.getElementsByTagName (' head ') [0].appendchild (style);

Insertrule (Document.stylesheets[0], ' #box ', ' background:red ', 0);

}

Functioninsertrule (sheet,selectortext,csstext,position)

{

if (sheet.insertrule)// if the non - IE;

{

Sheet.insertrule (selectortext+ "{" +csstext+ "}", position);

}

ElseIf (sheet.addrule)// if it is IE;

{

Sheet.addrule (selectortext,csstext,position);

}

// Dynamic Execution Style2

Functionloadstylestring (CSS)

{

Varstyle = document.createelement ("style");

Style.type = "Text/css";

Try

{

//IE will error ; not allowed to <style> element to add a child node ;

Style.appendchild (document.createTextNode (CSS));

}

catch (ex)

{

          // at this time Span style= "font-size:16px;font-family: ' The song Body '; > The stylesheet This property has a Span style= "FONT-SIZE:16PX;" >csstext Span style= "font-size:16px;font-family: ' The song Body '; You can accept css code Span style= "FONT-SIZE:16PX;" >;

Style.styleSheet.cssText = CSS;

}

Varhead = document.getElementsByTagName ("head") [0];

Head.appendchild (style);

}

Loadstylestring ("Body {background-color:red}");

Reference Blog: Http://www.cnblogs.com/yizihan/p/4386431.html?utm_source=tuicool

Http://www.cnblogs.com/lkf18/archive/2012/05/24/2515935.html

http://www.iteye.com/topic/147810

Http://www.cnblogs.com/feng_013/articles/1807520.html

This article is from the "7439523" blog, please be sure to keep this source http://7449523.blog.51cto.com/7439523/1629392

JavaScript dynamic load scripts and styles