Question

我正在代码中动态加载一些YUI脚本以响应Ajax请求。在发出请求时，DOM和页面被完全加载 - 这是对用户事件的响应。

我将标签添加到头部，作为孩子。但我偶然发现了一些问题：

我添加了两个在Yahoo!托管的YUI脚本。 CDN和我自己的内联脚本负责创建对象，添加事件侦听器和呈现YUI小部件。但是当我的脚本运行YUI脚本时，我没有加载，但却给我错误而没有按照我的预期运行。

当YUI脚本完全加载时，有一种方法可以只运行我的脚本（或定义要运行的函数）吗？

Answer 1

您是否尝试过onload事件？

已编辑：（感谢Jamie）

var script = document.createElement("script");
script.type = "text/javascript";
script.src = src;
//IE:
if(window.attachEvent && document.all) {
    script.onreadystatechange = function () {
        if(this.readyState === "complete") {
            callback_function(); //execute
        }
    };
}
//other browsers:
else {
    script.onload = callback_function; //execute
}
document.getElementsByTagName("head")[0].appendChild(script);

Answer 2

如果您正在使用YUI 2.x我强烈建议您使用YUI Get实用程序，因为它旨在解决此类问题。

Answer 3

如果要从Yahoo!加载多个单独的脚本文件CDN，您需要确保在执行相关代码之前加载它们。您可以使用组合处理程序来避免这种情况。请参阅配置程序以获取脚本URL应该从一个URL加载所有需要的YUI文件。

http://developer.yahoo.com/yui/articles/hosting/

考虑到这一点，假设您必须异步加载YUI文件，您应该使用digitalFresh所指示的onload / onreadystatechange处理程序。

我建议使用以下模式：

(function (d) {
    var s = d.createElement('script'),
        onEvent = ('onreadystatechange' in s) ? 'onreadystatechange' : 'onload';

    s[onEvent] = function () {
        if (("loaded,complete").indexOf(this.readyState || "loaded") > -1) {
            s[onEvent] = null;

            // Call your code here
            YAHOO.util.Dom.get('x').innerHTML = "Loaded";
        }
    };

    // Set the src to the combo script url, e.g.
    s.src = "http://yui.yahooapis.com/combo?2.8.1/...";

    d.getElementsByTagName('head')[0].appendChild(s);
})(document);

Answer 4

您可以使用setTimeout()来运行一些只检查它是否已加载的函数 - 检查

之类的内容

if (typeof YUI_NAMESPACED_THING !== "undefined") runCode()

编辑谢谢，CMS

Answer 5

如果我理解正确，你的ajax响应：

<script href="yui-combo?1"></script>
<script href="yui-combo?2"></script>
<p>some text here</a>
<script>
// using some of the components included in the previous combos
// YAHOO.whatever here...
</script>

如果是这种情况，这是一个明确的情况，你应该使用调度程序插件。 Dispatcher将模拟AJAX响应的浏览器加载过程。基本上它将按照确切的顺序加载和执行每个脚本。

最诚挚的问候， Caridy

动态加载脚本

5 个答案: