简体   繁体   English

jQuery-同一页面上的多个版本-中断功能

[英]JQuery - multiple versions on the same page - breaking functionality

Have a requirement to load custom Javascript on a page after it has finished loading ie using a third party tool we get to execute on live pages on the website after the page loads. 要求在完成加载后在页面上加载自定义Javascript,即使用第三方工具在页面加载后在网站的实时页面上执行。

Coming to the issue now, the page has a lot of Javascript dependent elements which have been coded using jquery version 1.6.2. 现在来看这个问题,该页面上有许多依赖于Javascript的元素,这些元素已使用jquery 1.6.2版进行了编码。 The runtime script that I need to execute needs jquery version 1.10.x. 我需要执行的运行时脚本需要jquery版本1.10.x。 See code below. 请参见下面的代码。

$('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"/>');

As soon as the first line of code is applied, the original functionality on the page breaks because of some conflict of the existing code with Jquery version 1.10.x. 一旦应用了第一行代码,由于现有代码与Jquery 1.10.x版本的某些冲突,页面上的原始功能就会中断。

So, I tried using noConflict as suggested on other questions like this : 因此,我尝试像在其他类似问题上建议的那样使用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"/>');

In addition, I changed the file 'mycustom.js' to use $j instead of $ for jquery. 另外,我将文件“ mycustom.js”更改为使用$ j代替jquery的$。 But I still have the same problem. 但是我仍然有同样的问题。 How do I prevent the JQuery 1.10.x from breaking the existing page. 如何防止JQuery 1.10.x破坏现有页面。

Thanks in advance. 提前致谢。

[EDIT] [编辑]

Using Austin's suggestion, was able to tweak the timing of the libraries getting loaded. 使用Austin的建议,可以调整加载库的时间。 Below code works now. 下面的代码现在可以工作了。

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);

Try no conflicting the 1.6.2 then loading up the new version, then reseting the reference to $ to 1.6.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;

then in your script file 然后在您的脚本文件中

(function($){

})($jQuery1_10_2);

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM