jquery:如何检测jquery版本,并在一个网页中引入不同的jquery版本

和任何其他框架类似,jquery版本众多,通常来说,当然是使用最新的版本为好。但是,在实际情境中,可能需要同时使用两个不同版本的jquery。例如下面的情景:

制作一个bookmarklet小工具

在任意一个实际的第三方网页中,通过bookmarklet插入一段自己的脚本,这段脚本需要基于1.9.0以上版本的jquery执行特定的业务逻辑。问题随之而来,由于第三方网页是不确定的,它可能没有使用jquery,也可能已经使用了jquery,但版本未知。这时,我们需要检测出到底是那种情况,如果该网页没使用jquery,那么直接加载自己的jquery1.9.0即可;如果该网页使用了低于1.9.0以的jquery版本,那么需要加载自己的jquery并避免冲突;如果该网页使用的是1.9.0以上的版本,吼吼,省心了。

检测jquery及其版本

网页引入jquery库时,默认会在全局作用域中注入以下两个变量:

window.$ = window.jQuery = { jQuery object };

因此检测是否已经加载了jquery,只需:

if(window.jQuery){
  //some code
}

至于检测jquery的版本,可以使用一个不常用的属性:

jQuery().jquery

该属性即是jquery的版本号,例如1.9.0。

多版本jquery共存

jquery有一个核心方法:noConflict,使用该方法可以释放并恢复全局作用域中的$和jQuery变量,并返回jquery对象。

执行代码:

var $1 = $.noConflict();

此时,全局变量中的$被释放,并恢复到jquery被引入之前的值。注意,此时的$ == undifined并不一定会返回true,因为$被恢复到引入jquery之前的值。如果此时想要使用jquery,可以使用$1或者jQuery。

执行代码:

$1 = $.noConfict(true);

那么,全局变量中的$和jQuery都会被释放并恢复,就像jquery并没有被引入一样。如果此时想使用jquery,只能用$1来引用。

参考:

  1. jQuery 核心 - noConflict() 方法
  2. 如何在一个页面上让多个jQuery版本共存

完整代码:

(function(){
    if(!window.jQuery || (window.jQuery && window.jQuery().jquery.substring(0, 3) < 1.9)){
        var script = document.createElement('script');        
        script.src = "//libs.baidu.com/jquery/1.9.0/jquery.js"
        script.onload = script.onreadystatechange = someFunction;
        
        var body = document.body;
        body.firstChild ? body.insertBefore(script, body.firstChild): body.appendChild(script);
    }else{
        someFunction();
    }   
    
    function someFunction(){
        $jq =  $.noConflict(true);
        //业务代码
})();

 

用支付宝钱包扫描此二维码,为本文付款
本文标签:
javascriptjquery

官方公众号:
查看更多有趣的信息,请扫码关注光阴籽官方微信公众号hourseeds。

公众号id:
光阴籽

版权声明:
本文为站长原创,如需转载,请联系作者,并以超链接形式注明出处

本文地址:
http://www.nanerbang.com/article/52/