같은 페이지에서 여러 버전의 jQuery를 사용할 수 있습니까?

같은 페이지에서 여러 버전의 jQuery를 사용할 수 있습니까?

현재 진행 중인 프로젝트에서는 고객의 웹 페이지에서 jQuery를 사용해야 합니다.은 저희가해 드립니다.이 코드에는 몇 가지 청크가 되어 있습니다.여기에는 몇 가지 코드가 포함됩니다.<script>을 <script>- created - 성 - -<iframe>있지 , 에는 "jQuery"도 "jQuery"는 "jQuery"의 "jQuery"의 "jQuery"의 "jQuery"의 "jQuery"의 "JQuery"의 "JQuery"의 "JQuery"가 포함됩니다.<script>j의 GoogleQuery google Google の query query query 。

문제는 일부 고객이 이미 이전 버전의 jQuery를 설치했을 수 있다는 것입니다.적어도 최신 버전일 경우 이 방법이 작동하지만, 당사의 코드는 jQuery 라이브러리에 최근에 도입된 기능에 의존하기 때문에 고객의 jQuery 버전이 너무 오래된 경우가 종종 있습니다.최신 버전의 jQuery로 업그레이드하도록 요구할 수 없습니다.

새로운 버전의 jQuery를 로딩하여 고객 페이지의 코드를 방해하거나 영향을 미치지 않는 코드 내에서만 사용할 수 있습니까?이상적으로는 jQuery의 존재를 확인하고 버전을 검출하여 오래된 버전이라면 최신 버전을 로드하여 코드에 사용할 수 있습니다.

를 로드하는 .<iframe>에는 델의 델의 델 도메인도 되어 있습니다.<script>실현 하다고 생각되지만, 것도 없고).<iframe>

네, jQuery의 nonconflict 모드로 인해 가능합니다.http://blog.nemikor.com/2009/10/03/using-multiple-versions-of-jquery/

<!-- load jQuery 1.1.3 -->
<script type="text/javascript" src="http://example.com/jquery-1.1.3.js"></script>
<script type="text/javascript">
var jQuery_1_1_3 = $.noConflict(true);
</script>

<!-- load jQuery 1.3.2 -->
<script type="text/javascript" src="http://example.com/jquery-1.3.2.js"></script>
<script type="text/javascript">
var jQuery_1_3_2 = $.noConflict(true);
</script>

$('#selector').function(); 하면 될 것 같아요jQuery_1_3_2('#selector').function(); ★★★★★★★★★★★★★★★★★」jQuery_1_1_3('#selector').function();.

이것을 보고 시험해 본 결과, 실제로는 한번에 여러 개의 jquery 인스턴스를 실행할 수 없었습니다.여기저기 찾아본 결과, 이것이 딱 들어맞고 훨씬 적은 코드라는 것을 알게 되었습니다.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script>var $j = jQuery.noConflict(true);</script>
<script>
  $(document).ready(function(){
   console.log($().jquery); // This prints v1.4.2
   console.log($j().jquery); // This prints v1.9.1
  });
</script>

그래서 "$" 뒤에 "j"만 추가하면 됩니다.

$j(function() {
  $j('.button-pro').on('click', function() {
    var el = $('#cnt' + this.id.replace('btn', ''));
    $j('#contentnew > div').not(el).animate({
      height: "toggle",
      opacity: "toggle"
    }, 100).hide();
    el.toggle();
  });
});

http://forum.jquery.com/topic/multiple-versions-of-jquery-on-the-same-page에서 가져온 내용:

• -- "jquery.versionX.js" 가 됩니다.$ ★★★★★★★★★★★★★★★★★」jQuery에에에에 에에에에에에에에
• .이제는 'jquery.versionY.js'라고 .$ ★★★★★★★★★★★★★★★★★」jQuery버전 Y에 속하다_$그리고._jQuery버전 X에 속합니다.
• my_jQuery = jQuery.noConflict(true);--지금 당장$그리고.jQuery버전 X에 속합니다._$그리고._jQuery아마 null일 것입니다.my_jQuery버전 Y 입니다.

jQuery의 두 번째 버전을 로드한 후 원래 버전으로 복원하거나 이전에 로드된 jQuery가 없는 경우 두 번째 버전을 유지할 수 있습니다.다음은 예를 제시하겠습니다.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
    var jQueryTemp = jQuery.noConflict(true);
    var jQueryOriginal = jQuery || jQueryTemp;
    if (window.jQuery){
        console.log('Original jQuery: ', jQuery.fn.jquery);
        console.log('Second jQuery: ', jQueryTemp.fn.jquery);
    }
    window.jQuery = window.$ = jQueryTemp;
</script>
<script type="text/javascript">
    console.log('Script using second: ', jQuery.fn.jquery);
</script>
<script type="text/javascript">
    // Restore original jQuery:
    window.jQuery = window.$ = jQueryOriginal;
    console.log('Script using original or the only version: ', jQuery.fn.jquery);
</script>

페이지에는 원하는 만큼 다양한 jQuery 버전을 설정할 수 있습니다.

사용방법:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script>
    var $i = jQuery.noConflict();
    alert($i.fn.jquery);
</script> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
    var $j = jQuery.noConflict();
    alert($j.fn.jquery);
</script> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
    var $k = jQuery.noConflict();
    alert($k.fn.jquery);
</script> 

데모 | 출처

항상 jQuery 최신 버전 또는 최신 안정 버전을 사용해야 합니다.그러나 다른 버전으로 작업을 수행해야 하는 경우 해당 버전을 추가하고 이름을 변경할 수 있습니다.$다른 이름으로요예를 들어.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script>var $oldjQuery = $.noConflict(true);</script>

다음을 사용하여 무언가를 쓴다면 여기를 보세요.$그러면 최신 버전을 얻을 수 있습니다.하지만 만약 당신이 오래된 것을 가지고 무언가를 해야 한다면, 그냥 사용하세요.$oldjQuery대신$.

다음은 예를 제시하겠습니다.

$(function(){console.log($.fn.jquery)});
$oldjQuery (function(){console.log($oldjQuery.fn.jquery)})

데모

<script type="text/javascript" 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>var $j = $.noConflict(true);</script>

잘 안 돼서 로 바꿨어요.

<script>var jQuery = $.noConflict(true);</script>

나한테는 효과가 있었어요

Juan Vidal의 답변을 더욱 개선하기 위해 한 버전에서 여러 jquery 플러그인(예: 3.3.1)을 사용하고 다른 버전에서 여러 jquery 플러그인을 사용하는 경우(예: 1.10.2) 이전 버전이 작동하려면 플러그인의 minified/unminified.j 파일을 파고들어 다음과 같은 행을 변경해야 합니다.

Example 1: module.exports=a:a(jQuery) to module.exports=a:a(my_jQuery)
Example 2: b(a,require("jquery")):b(a,a.jQuery)} to this: or b(a,require("jquery")):b(a,a.my_jQuery)}

언급URL : https://stackoverflow.com/questions/1566595/can-i-use-multiple-versions-of-jquery-on-the-same-page