JavaScript何时准备就绪？

This is a follow up to my article (the most popular on my blog based on the comments) about the JavaScript includes, the technique to include new .js files after the page is loaded, by using DOM to create a new script tag. The problem that is discussed in the comments is how to find out when/if the new script was actually downloaded. Here's a solution (IE only!).

这是我的文章(基于评论的博客上最受欢迎的博客)的后续文章，该文章包括JavaScript ，该技术是在页面加载后通过使用DOM创建新的脚本标签来包含新的.js文件的技术。 评论中讨论的问题是如何确定何时/是否实际下载了新脚本。 这是一个解决方案(仅适用于IE！)。

Today I came accross an article on MSDN, written back in 1998 where they talk about readyState property of an inline JavaScript. So I decided to try it in conjunction with my JS includes. It worked! The solution is IE-only, but probably there is something similar for Firefox. Please post a comment if you know one.

今天，我遇到了一篇有关MSDN的文章，该文章写于1998年，当时他们谈论内联JavaScript的readyState属性。 因此，我决定将其与JS include一起尝试。 有效！ 该解决方案仅适用于IE，但Firefox可能也有类似的解决方案。 如果您知道，请发表评论。

The idea is that after a new DOM element (a script tag) is created, you can have access to the readyState property of the element. If it says "complete", then the new script is included and it's OK to call functions from it. If you want to "listen" when the script download will be completed, you can attach an listener to the onreadystatechange event, just like with XMLHttpRequests.

这个想法是，在创建新的DOM元素(脚本标记)之后，您可以访问该元素的readyState属性。 如果显示“完成”，则包含新脚本，并且可以从中调用函数。 如果要在脚本下载完成时“收听”，则可以将侦听器附加到onreadystatechange事件，就像使用XMLHttpRequests一样。

Here's an example:

这是一个例子：

var js;
function include_js(file) {
    var html_doc = document.getElementsByTagName('head').item(0);
    js = document.createElement('script');
    js.setAttribute('type', 'text/javascript');
    js.setAttribute('src', file);
    html_doc.appendChild(js);
 
    // alert state change
    js.onreadystatechange = function () {
        alert(js.readyState);
 
        if (js.readyState == 'complete') {
            // safe to call a function
            // found in the new script
            imready();
        }
    }
    return false;
}

This also works if you decide to include new CSS files on the fly. If you want to know in your javascript when the CSS is downloaded, you can do the same check.

如果您决定动态添加新CSS文件，这也可以使用。 如果您想在JavaScript中知道CSS的下载时间，则可以进行相同的检查。

Here's a demo that includes a CSS and alert()s onreadystatechange and also includes a JS, alerts the state change and when "complete", calls a function from the newly inlcluded script.

这是一个包含CSS和alert()的onreadystatechange的演示，还包括一个JS，用于警告状态更改，并在“完成”时从新包含的脚本中调用函数。

This solution to the problem "When is my include loaded?" is perfect, if you ask me, very clean and simple. The problem is it's IE-only, but the good news is that FF won't give you an error, it will just work as if the extra code was not there, simply because FF won't fire an onreadystatechange event.

此问题的解决方案“何时加载我的包含？” 完美，如果您问我，非常干净和简单。 问题是它仅适用于IE，但好消息是FF不会给您错误，它就像没有多余的代码一样工作，仅是因为FF不会触发onreadystatechange事件。

2006-10-25 update: Thanks to the comments, the cross-browser way is here.

2006-10-25更新：感谢您的评论，这里是跨浏览器的方式。

Tell your friends about this post on Facebook and Twitter

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

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