动态加载外部 css和javascript脚本 文件

在Google到的,随便收藏一个CSS模板站点(http://www.freecsstemplates.org/)

The problem in question is how to find out a dynamically included JavaScript file is actually loaded. The concept of JavaScript includes is here, the IE-only solution is here. The IE solution is to use the

onreadystatechange

event that is fired when a new scriptis included. It also works for dynamically loaded CSS files using a new

link

DOM element. Thanks to the comment from Björn Graf, I tried using

onload

event to test if the new scriptis included using Firefox. It worked!

The code

What we have here (demo) is trying to include a .js file and an .css file, creating new

script

and

link

DOM elements. Then I'm attaching event listeners to those new elements - one

onload

and one

onreadystatechange

. The scriptthat is included (jsalert.js) has one

alert()

.

var css;
function include_css(css_file) {
var html_doc = document.getElementsByTagName('head')[0];
css = document.createElement('link');
css.setAttribute('rel', 'stylesheet');
css.setAttribute('type', 'text/css');
css.setAttribute('href', css_file);
html_doc.appendChild(css);
// alert state change
css.onreadystatechange = function () {
if (css.readyState == 'complete') {
alert('CSS onreadystatechange fired');
}
}
css.onload= function () {
alert('CSS onloadfired');
}
return false;
}
var js;
function include_js(file) {
var html_doc = document.getElementsByTagName('head')[0];
js = document.createElement('script');
js.setAttribute('type', 'text/javascript');
js.setAttribute('src', file);
html_doc.appendChild(js);
js.onreadystatechange = function () {
if (js.readyState == 'complete') {
alert('JS onreadystate fired');
}
}
js.onload= function () {
alert('JS onloadfired');
}
return false;
}

Results

As you can probably guess, the results are different in IE and FF.

CSS inclusion - IE fires both events,

onload

first, then

onreadystatechange

. FF fires nothing.

JS inclusion - IE fires

onreadystatechange

. FF fires

onload

. Both will execute the scriptbefore firing the event.

Conclusion

1. So there is, after all, a cross-browser way to tell when a JavaScript is actually included and that is to attach two event listeners -

onload

and

onreadystatechange

.
2. In IE you have two ways to tell when a CSS is included.