在使用jquery之前动态加载jquery

时间:2015-02-23 16:09:32

标签: javascript jquery

我的脚本将在第三方网站中用作窗口小部件,因此我不知道加载了jquery以及在第三方端加载了哪个版本的jquery。

所以在加载到脚本下面之前我想检查是否已经在dom准备就绪后加载了最新的jquery 1.11.1如果没有那么我想加载jquery最新版并运行下面的脚本。

的script.js

   var $ = jQuery.noConflict( true );
             (function( $ ) {
                   $(document).ready(function() {
                       alert("Document Ready ");
                     });
            })($jy);

编辑1

var addNewJQuery = function() {
    (function( $ ) {
       $jy = $;
       var invokeOriginalScript;

      $(document).ready(function() {
            ......my code here.....
     }):
  })(jQuery);

}

1 个答案:

答案 0 :(得分:1)

不确定这是否适合您,但看起来它正常工作。

在加载第二个jQuery文件后,可能需要从头中删除其他脚本。但它似乎适用于加载的两个脚本。

我还添加了一个检查是否加载了jQuery,如果没有加载jQuery。

您还可以在此fiddle中找到相同的代码。

var addNewJQuery = function() {
    //var jQ = jQuery.noConflict(true);
    (function ($) {
        $(document).ready(function () {
            alert("You are now running jQuery version: " + $.fn.jquery);
        });
    })(jQuery);
};

if ( typeof jQuery === 'undefined' ) {
    alert('no jQuery loaded');
    //throw new Error("Something went badly wrong!"); // now you could load jQuery
    loadScript('https://code.jquery.com/jquery-1.11.2.js', addNewJQuery);
}

if ($.fn.jquery !== '1.11.2') {
    console.log('detected other jQuery version: ', $.fn.jquery);
    loadScript('https://code.jquery.com/jquery-1.11.2.js', addNewJQuery);
}


function loadScript(url, callback)
{
    // Adding the script tag to the head as suggested before
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;

    // Then bind the event to the callback function.
    // There are several events for cross browser compatibility.
    script.onreadystatechange = callback;
    script.onload = callback;

    // Fire the loading
    head.appendChild(script);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>