javascript 传奇_JS包括–传奇继续……

javascript 传奇

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 script is 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 script is included using Firefox. It worked!

有问题的问题是如何找出实际包含的动态包含JavaScript文件。 JavaScript include的概念在这里，仅IE的解决方案在这里。 IE解决方案是使用包含新脚本时触发的onreadystatechange事件。 它也适用于使用新的link DOM元素动态加载CSS文件。 感谢BjörnGraf的评论，我尝试使用onload事件来测试新脚本是否包含在Firefox中。 有效！

代码 (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 script that is included (jsalert.js) has one alert().

我们在这里(演示)正在尝试包括.js文件和.css文件，创建新script并link DOM元素。 然后，我将事件侦听器附加到这些新元素上-一个onload和一个onreadystatechange 。 包含的脚本( jsalert.js )具有一个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 onload fired');
    }
    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 onload fired');
    }
    return false;
}

结果 (Results)

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

您可能会猜到，IE和FF的结果是不同的。

• CSS inclusion - IE fires both events, onload first, then onreadystatechange. FF fires nothing.

  CSS包含-IE会触发两个事件，首先触发onload ，然后触发onreadystatechange 。 FF不会发射任何东西。

• JS inclusion - IE fires onreadystatechange. FF fires onload. Both will execute the script before firing the event.

  JS包含-IE会触发onreadystatechange 。 FF火灾onload 。 两者都将在触发事件之前执行脚本。

结论 (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.

1.毕竟，有一种跨浏览器的方式可以告诉您何时实际包含JavaScript，并且要附加两个事件侦听器： onload和onreadystatechange 。 2.在IE中，您可以通过两种方法判断何时包括CSS。

Tell your friends about this post on Facebook and Twitter

在Facebook和Twitter上告诉您的朋友有关此帖子的信息

翻译自: https://www.phpied.com/javascript-include-ready-onload/

javascript 传奇