如何将依赖jquery的javascript小部件嵌入未知环境中

在查看了一些答案和指针,并找到了一些有用的jquery黑客之后,我最终得到了如下的结果:

(function(window, document, version, callback) {
    var j, d;
    var loaded = false;
    if (!(j = window.jQuery) || version > j.fn.jquery || callback(j, loaded)) {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "/media/jquery.js";
        script.onload = script.onreadystatechange = function() {
            if (!loaded && (!(d = this.readyState) || d == "loaded" || d == "complete")) {
                callback((j = window.jQuery).noConflict(1), loaded = true);
                j(script).remove();
            }
        };
        (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script);
    }
})(window, document, "1.3", function($, jquery_loaded) {
    // Widget code here
});

如果jquery尚未加载,则会加载它,并将其封装在回调中,这样它就不会与页面上现有的jquery冲突。它还检查是否有最低版本可用,或者加载已知版本——在本例中是v1.3。它向回调(我的小部件)发送一个布尔值,说明是否在需要生成任何触发器的情况下加载了jquery。只有在jquery被加载之后,它才会调用我的小部件,并将jquery传递给它。

见 How to build a web widget (using jQuery) 亚历克斯·马兰登。

(function() {

// Localize jQuery variable
var jQuery;

/******** Load jQuery if not present *********/
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.4.2') {
    var script_tag = document.createElement('script');
    script_tag.setAttribute("type","text/javascript");
    script_tag.setAttribute("src",
        "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js");
    if (script_tag.readyState) {
      script_tag.onreadystatechange = function () { // For old versions of IE
          if (this.readyState == 'complete' || this.readyState == 'loaded') {
              scriptLoadHandler();
          }
      };
    } else { // Other browsers
      script_tag.onload = scriptLoadHandler;
    }
    // Try to find the head, otherwise default to the documentElement
    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
} else {
    // The jQuery version on the window is the one we want to use
    jQuery = window.jQuery;
    main();
}

/******** Called once jQuery has loaded ******/
function scriptLoadHandler() {
    // Restore $ and window.jQuery to their previous values and store the
    // new jQuery in our local jQuery variable
    jQuery = window.jQuery.noConflict(true);
    // Call our main function
    main(); 
}

/******** Our main function ********/
function main() { 
    jQuery(document).ready(function($) { 
        // We can use jQuery 1.4.2 here
    });
}

})(); // We call our anonymous function immediately

如果您还想使用一些jquery插件呢?用插件的缩小版本把自己变成一个单独的文件,并像下面那样加载插件,这样安全吗?(在本例中,从S3加载。)

(function(window, document, version, callback) {
  var j, d;
  var loaded = false;
  if (!(j = window.jQuery) || version > j.fn.jquery || callback(j, loaded)) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js";
    script.onload = script.onreadystatechange = function() {
        if (!loaded && (!(d = this.readyState) || d == "loaded" || d == "complete")) {
            window.jQuery.getScript('http://mydomain.s3.amazonaws.com/assets/jquery-plugins.js', function() {
              callback((j = window.jQuery).noConflict(1), loaded = true);
              j(script).remove();
            });
        }
    };
    document.documentElement.childNodes[0].appendChild(script)
  }
})(window, document, "1.5.2", function($, jquery_loaded) {
  // widget code goes here
});

见 Can I use multiple versions of jQuery on the same page?

您可以使用document.write()选择将jquery脚本添加到页面中吗?这将强制jquery同步加载。试试这个:

<script type="text/javascript" charset="utf-8">
// <![CDATA
 if (typeof jQuery === 'undefined') {
  document.write('<script src="{{ URL }}/jquery.js"><' + '/script>');
 }
// ]]>
</script>
<script type="text/javascript" src="{{ URL }}/widget.js"></script>

如果您想在小部件脚本中进行jquery检查,那么我相信以下功能可以跨浏览器工作:

(function() {
 function your_call($) {
  // your widget code goes here
 }
 if (typeof jQuery !== 'undefined') your_call(jQuery);
 else {
  var head = document.getElementsByTagName('head')[0];
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = '{{ URL }}/jquery.js';
  var onload = function() {
   if (!script.readyState || script.readyState === "complete") your_call(jQuery);
  }
  if ("onreadystatechange" in script) script.onreadystatechange = onload;
  else script.onload = onload;
  head.appendChild(script);
 }
})()

我知道这是个老话题…但我得到了比你的黑客更快的东西。 在小工具中尝试

"init": function()

那会解决问题的

我将下载jquery源并将jquery对象修改为另一个(jquerycustom)。

然后找到设置 $ 符号作为jquery对象并注释该例程。

我不知道这有多容易或困难,但我肯定会试试。

(另外,检查您的第二个选项,因为它不是坏的,小部件将要执行的站点可能有一个比您需要的版本旧的jquery版本)。

编辑: 我刚查了来源。你只要换一个 jQuery 用另一根绳子( jQcustom 例如)。然后,尝试评论这一行:

_$ = window.$

您可以这样引用定制jquery:

jQcustom("#id").attr(...)