Динамическая загрузка скриптов - PullRequest
Новая
       12

Динамическая загрузка скриптов

5 голосов
/ 27 июня 2010

Я загружаю несколько скриптов YUI динамически в мой код в ответ на запрос Ajax. DOM и страница полностью загружены, когда сделан запрос - это ответ на пользовательское событие.

Я добавляю метку в голову, как дети. Но я наткнулся на несколько проблем:

Я добавляю два скрипта YUI, размещенных на Yahoo! CDN и собственный встроенный скрипт, отвечающий за создание объекта, добавление слушателей событий и рендеринг виджетов YUI. Но я, когда мой сценарий запускается, сценарии YUI не загружаются, но выдают ошибки и не работают, как я ожидал.

Есть способ запустить мой скрипт (или определить функцию для запуска), когда скрипты YUI полностью загружены?

Ответы [ 5 ]

18 голосов
/ 27 июня 2010

Вы пробовали событие загрузки?

Отредактировано: (спасибо, Джейми) 

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);
2 голосов
/ 27 июня 2010

Если вы загружаете несколько отдельных файлов сценариев из Yahoo! CDN, вам нужно убедиться, что оба загружены, прежде чем выполнять зависимый код. Вы можете избежать этого, используя комбинированный обработчик. См. Конфигуратор, чтобы узнать, каким должен быть URL-адрес скрипта для загрузки обоих / всех необходимых файлов YUI с одного URL-адреса.

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

Учитывая это, предполагая, что вы должны загружать файлы YUI асинхронно, вы должны использовать обработчик onload / onreadystatechange, как отмечено digitalFresh.

Я бы порекомендовал следующую схему: 

(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);
2 голосов
/ 27 июня 2010

Если вы используете YUI 2.x, я настоятельно рекомендую использовать утилиту YUI Get , поскольку она предназначена только для решения подобных проблем.

1 голос
/ 27 июня 2010

Вы можете использовать setTimeout() для запуска какой-либо функции, которая просто проверяет, загружена ли она, - например,

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

РЕДАКТИРОВАТЬ Спасибо, CMS

0 голосов
/ 27 июня 2010

Если я правильно понимаю, ваш ответ 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>

Если это так, то это явный случай, в котором вы должны использовать диспетчерский плагин.Диспетчер будет эмулировать процесс загрузки браузера для ответов AJAX.В основном он будет загружать и выполнять каждый скрипт в точном порядке.

С наилучшими пожеланиями, Кариди

...