JQuery - 同一页面上的多个版本 - 破坏功能

时间:2014-11-24 22:02:56

标签: javascript jquery

要求在页面加载完成后在页面上加载自定义Javascript,即使用第三方工具,我们可以在页面加载后在网站上的实时页面上执行。

现在出现问题,该页面有许多依赖于Javascript的元素,这些元素已使用jquery 1.6.2版进行编码。我需要执行的运行时脚本需要jquery版本1.10.x.请参阅下面的代码。

$('body').append('<script type="text/javascript" src="http://www.mywebsite.com/min/lib/jquery-1.10.2.js"></script>');
$('body').append('<script type="text/javascript" src="http://www.runtimetool.com/mycustom.js"/>');

一旦应用了第一行代码,页面上的原始功能就会因为现有代码与Jquery版本1.10.x的某些冲突而中断。

所以,我尝试使用noConflict,就像其他问题一样:

$('body').append('<script type="text/javascript" src="http://www.mywebsite.com/min/lib/jquery-1.10.2.js"></script>');
var $j = jQuery.noConflict(true);    
$('body').append('<script type="text/javascript" src="http://www.runtimetool.com/mycustom.js"/>');

此外,我将文件'mycustom.js'更改为使用$ j而不是$ for jquery。但我仍然有同样的问题。如何防止JQuery 1.10.x破坏现有页面。

提前致谢。

[编辑]

使用Austin的建议,能够调整加载库的时间。下面的代码现在可以使用。

var $jQuery1_6_2 = jQuery.noConflict(true);
$jQuery1_6_2('body').append('<script type="text/javascript" src="http://www.mywebsite.com/min/lib/jquery-1.10.2.js"></script>');
$jQuery1_6_2('body').append('<script type="text/javascript" src="http://www.runtimetool.com/mycustom.js"/>');
setTimeout(function(){
    $jQuery1_10_2 = jQuery.noConflict(true);
    $ = $jQuery1_6_2;
    jQuery = $jQuery1_6_2;

    //Logic to use Jquery 1.10 using '$jQuery1_10_2'

}, 1000);

1 个答案:

答案 0 :(得分:2)

尝试不冲突1.6.2然后加载新版本,然后将引用重置为$至1.6.2

var $jQuery1_6_2 = jQuery.noConflict(true);
(function($) {
    $('body').append('<script type="text/javascript" src="http://www.mywebsite.com/min/lib/jquery-1.10.2.js"></script>');
    $jQuery1_10_2 = jQuery.noConflict(true);
    $('body').append('<script type="text/javascript" src="http://www.runtimetool.com/mycustom.js"/>');
})($jQuery1_6_2);
$ = $jQuery1_6_2;

然后在你的脚本文件中

(function($){

})($jQuery1_10_2);