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函数的回调函数在加载资源后继续工作。

如果要加载多个资源，可以将从jQuery AJAX函数返回的XHR对象推送到数组，然后等待阵列中的所有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

jquery Mobile：如何加载外部Javascripts

1 个答案: