Four ways to introduce JS dynamically

Index.html

[HTML]View Plaincopy

2. <! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd">
4. <html>
6. <head>
8. <meta content= "text/html;charset=utf-8" http-equiv="Content-type">
10. <title> </title>
12. <script src=' id="S1"></script>
14. <script src="Dynamic.js"></script>
16. </head>
20. <body>
24. </Body>
26. </html>

Test.js

[HTML]View Plaincopy

1. Alert ("Hello! I am Test.js ");
2. var str="1";

Dynamic.js

[JavaScript]View Plaincopy

2. The first way: direct document.write But this will put the current page full overwrite
4. document.write ("<script src= ' test.js ' ><\/script>");
10. Second way: Dynamically changing the SRC attribute of an existing script
12. S1.src= "Test.js"
18. Third Way: Dynamic creation of script elements
20. /* var ohead = document.getelementsbytagname (' HEAD '). Item (0);
22. var oscript= document.createelement ("script");
24. Oscript.type = "Text/javascript";
26. Oscript.src= "Test.js";
28. Ohead.appendchild (Oscript);
30. */
32. In fact, the principle is to use the DOM dynamic introduction of a JS to the file to ~ can and the original JS communication ~
36. alert (str);
42. /* More than three ways to use the asynchronous loading mechanism, which is the loading process, the page will go down,
44. If this is problematic, such as the above STR is inaccessible, because when the program executes alert (STR), test.js is still loading ing ....
48. <strong><span style= "color: #ff0000;" > So the fourth is based on Ajax requests, and is recommended </span></strong>
50. */
54. function Gethttprequest ()
56. {
58. if (window. XMLHttpRequest) //Gecko
60. return new XMLHttpRequest ();
62. Else if (window. ActiveXObject) //IE
64. return new ActiveXObject ("msxml2.xmlhttp");
66. }
72. function ajaxpage (sId, url) {
74. var oxmlhttp = Gethttprequest ();
76. Oxmlhttp.onreadystatechange = function ()
78. {
80. if (oxmlhttp.readystate = = 4)
82. {
84. Includejs (sId, URL, oxmlhttp.responsetext);
86. }
88. }
90. Oxmlhttp.open (' GET ', URL, false); Synchronous Operation
92. Oxmlhttp.send (null);
94. }
100. function Includejs (sId, FILEURL, source)
102. {
104. if (source = null) && (!document.getelementbyid (sId))) {
106. var ohead = document.getelementsbytagname (' HEAD '). Item (0);
108. var oscript = document.createelement ( "script");
110. Oscript.type = "Text/javascript";
112. Oscript.id = sId;
114. Oscript.text = source;
116. Ohead.appendchild (Oscript);
118. }
120. }
124. Ajaxpage ( "SCRA", "test.js");
126. Alert ( The main page dynamically loads the JS script.  ");
128. Alert ( "The main page dynamically loads the A.js and takes the variables:" + str);

Four ways to introduce JS dynamically