В процессе разработки столкнулся с проблемой интеграции javascript-a для виджетов в ajax-приложении. Использую библиотеку html5-history-api.
Вот кусок кода:
$("a").live('click', function() {
history.pushState( null, null, this.href );
var urlReq = this.href;
$.post(
urlReq,
{},
function(data){
var content = $("#content");
$("title").text(data.module.title);
content.html(data.module.content);
},
'json'
);
return false;
});
Этот код лоадит основной контент на страницу. И соль собственно вот в чем:
При не ajax запросе сервер выдает всю страницу целиком, в т.ч. и <script src=""></script>. При переходе с одной страницы приложения на другую меняется контент модуля, а также должны подгружаться другие виджеты. Например, модуль текстовой страницы выводит содержимое главной страницы и справа виджет новостей крутится. Когда осуществляется переход на "новости" модуль публикаций грузит новости, а виджет новостей на этой странице не нужен. Так вот. Если взять оборатную ситуацию. Загружена страница новостей -> клик по главной -> грузится текст главной + надо подгрузить виджет, который за собой тянет js-файлы. Есть метод:
function addScript(src){
var newScript = document.createElement("script");
newScript.src = src;
newScript.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(newScript);
}
И наконец таки вопрос:
Будет ли являться хорошей реализацией следующая схема:
На каждой странице подключить скрипт addScript(src) и при ajax-запросе выполнять чтото типа этого:
$("a").live('click', function() {
history.pushState( null, null, this.href );
var urlReq = this.href;
$.post(
urlReq,
{},
function(data){
var content = $("#content");
$("title").text(data.module.title);
content.html(data.module.content);
for (var widget in data.widgets){
for(wScript in widget.scripts)
addScript(wScript);
}
},
'json'
);
return false;
});
И вообще addScript() будет видна в function(data){} ?