jqueryMobile: Как загрузить внешние Javascripts

Question

Я понял, что это был распространенный сценарий, и был удивлен тем, что не нашел ответа здесь. Итак, вот оно ...

Некоторые страницы на моем jquerymobile сайте используют внешние javascripts. Я не хочу, чтобы эти скрипты загружались на каждую страницу сайта. Он мобилен, и он должен быстро загружаться.

Как загрузить внешний javascript, чтобы он был доступен в DOM, когда ему нужно ссылаться. Я нашел эту статью в Stack, которая, как представляется, имеет хорошую технику: Using Javascript to load other external Javascripts

Если я динамически загружаю этот внешний javascript, должен ли я использовать событие pageinit? http://jquerymobile.com/test/docs/api/events.html

Если я использую это событие, будет ли сценарий загружен в DOM к тому времени, когда тело страницы ссылается на него ... или я получу ошибку ссылки на объект?

Answer 1

jQuery имеет функцию $.getScript(), которую вы можете использовать для извлечения внешних активов и оценки их в глобальной области. Вы можете использовать функцию обратного вызова для этой функции AJAX для выполнения работы после загрузки актива.

Если вы хотите загрузить несколько активов, вы можете нажать объект XHR, возвращенный из функций jQuery AJAX, в массив, а затем дождаться разрешения всех объектов XHR в массиве.

SINGLE

//get remote asset when a specified page is initialized by jQuery Mobile 
$(document).delegate('#my-map-page', 'pageinit', function() { 
    $.getScript('http://maps.google.com/maps/api/js?sensor=false', function() { 
     //the code has now been evaluated and you can utilize it here 
    }); 
}); 

НЕСКОЛЬКИХ

$(document).delegate('#my-map-page', 'pageinit', function() { 

    //setup array for XHR objects and one for the URLs of the assets you want to get 
    var jqXHRs = [], 
     scripts = ['http://maps.google.com/maps/api/js?sensor=false', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js']; 

    //loop through the script URLs and create an AJAX request to get them, 
    //also add the XHR object for the request to an array 
    for (var i = 0, len = scripts.length; i < len; i++) { 
     jqXHR.push($.getScript(scripts[i])); 
    } 

    //use the array of XHR objects we created to wait for all assets to load 
    $.when(jqXHR).then(function() { 
     //all the scripts have loaded and are evaluated, do work 
    }); 
}); 

Некоторые Документация:

• $.when(): http://api.jquery.com/jquery.when
• $.then(): http://api.jquery.com/jquery.then
• $.getScript(): http://api.jquery.com/jquery.getScript
• pageInit: http://jquerymobile.com/demos/1.1.0-rc.2/docs/api/events.html