Загрузка сценариев динамично
Я загружаю несколько сценариев YUI динамично в моем коде в ответ на запрос Ajax. DOM и страница полностью загружаются, когда запрос выполнен - это - ответ для пользовательского события.
Я добавляю тег для заголовка как дети. Но я споткнулся в нескольких проблемах:
Я добавляю два сценария YUI, размещенные в Yahoo! CDN и встроенный мой собственный сценарий, ответственный за создание объекта, добавление слушателей события и рендеринг виджетов YUI. Но я, когда мой сценарий запускает скрипты YUI, не загружаюсь, все же давая мне ошибки и не работая, как я ожидаю.
Существует способ только запустить мой скрипт (или определите функцию, которая будет выполнена), когда сценарии YUI полностью загружаются?
5 ответов
Вы можете использовать setTimeout() для запуска какой-нибудь функции, которая просто проверяет, загружен ли он - проверьте что-нибудь вроде
if (typeof YUI_NAMESPACED_THING !== "undefined") runCode()
EDIT Спасибо, CMS
Вы пробовали событие onload?
Редактировано: (спасибо Джейми)
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);
Если вы загружаете несколько отдельных файлов скриптов из Yahoo! CDN, вам нужно убедиться, что оба файла загружены перед выполнением зависимого кода. Вы можете избежать этого, используя обработчик combo. Обратитесь к Конфигуратору, чтобы узнать, каким должен быть 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);
Если вы используете YUI 2.x, я настоятельно рекомендую использовать утилиту YUI Get , поскольку она предназначена для решения именно такого рода проблем.
Если я правильно понимаю, ваш ответ 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. Обычно он загружает и выполняет каждый скрипт в точном порядке.
С уважением, Кариди