在使用 jquery 之前动态加载 jquery

Question

我的脚本将用作第三方网站中的小部件，因此我不知道已加载 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);

}

Answer 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>