在页面中动态载入外部javascript

tznktg

有时候需要在网页中某个div载入之后，动态引入一段javascript，IE下的解决方案：

1. newjs.onreadystatechange = function () {
   
2. if (newjs.readyState == 'loaded') {
   
3. // ready!
   
4. }
   
5. }
   
6. newjs.onload = function () {
   
7. // ready!
   
8. }

复制代码

主要利用了onload以及onreadystatechange事件。把这个加以利用，也能动态载入外部css。下面是同时适合Ie/firefox的写法。

1. var css;
   
2. function include_css(css_file) {
   
3. var html_doc = document.getElementsByTagName('head')[0];
   
4. css = document.createElement('link');
   
5. css.setAttribute('rel', 'stylesheet');
   
6. css.setAttribute('type', 'text/css');
   
7. css.setAttribute('href', css_file);
   
8. html_doc.appendChild(css);
   
9. // alert state change
   
10. css.onreadystatechange = function () {
    
11. if (css.readyState == 'complete') {
    
12. alert('CSS onreadystatechange fired');
    
13. }
    
14. }
    
15. css.onload = function () {
    
16. alert('CSS onload fired');
    
17. }
    
18. return false;
    
19. }
    
20. var js;
    
21. function include_js(file) {
    
22. var html_doc = document.getElementsByTagName('head')[0];
    
23. js = document.createElement('script');
    
24. js.setAttribute('type', 'text/javascript');
    
25. js.setAttribute('src', file);
    
26. html_doc.appendChild(js);
    
27. js.onreadystatechange = function () {
    
28. if (js.readyState == 'complete') {
    
29. alert('JS onreadystate fired');
    
30. }
    
31. }
    
32. js.onload = function () {
    
33. alert('JS onload fired');
    
34. }
    
35. return false;
    
36. }

复制代码

这里是Demo:http://www.phpied.com/javascript-include，有动态载入css以及js的例子。