내가 작업중 인 프로젝트는 고객의 웹 페이지에서 jQuery를 사용해야합니다. 고객은 우리가 몇 가지 포함하는 공급거야 코드의 덩어리 삽입합니다 <script>A의 위젯 구축 요소 <script>-created을 <iframe>. 최신 버전의 jQuery를 아직 사용하지 않는 경우 여기에는 <script>Google의 호스팅 된 jQuery 버전이 포함됩니다.

문제는 일부 고객이 이미 이전 버전의 jQuery를 설치했을 수 있다는 것입니다. 최신 버전 인 경우에는 작동하지만 코드는 jQuery 라이브러리에서 최근에 도입 된 일부 기능에 의존하므로 고객의 jQuery 버전이 너무 오래된 경우도있을 수 있습니다. 최신 버전의 jQuery로 업그레이드 할 필요는 없습니다.

고객 페이지의 코드를 방해하거나 영향을 미치지 않는 코드 컨텍스트 내에서만 사용하기 위해 최신 버전의 jQuery를로드 할 수있는 방법이 있습니까? 이상적으로는 jQuery가 있는지 확인하고 버전을 감지하고 너무 오래된 경우 코드에 사용하기 위해 최신 버전을로드 할 수 있습니다.

나는 <iframe>고객의 도메인에 jQuery를로드 할 아이디어를 가지고 있었고 우리를 포함하고 <script>있습니다. 여분 <iframe>의).

예, jQuery의 noconflict 모드로 인해 가능합니다. 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 versionX에 속한다.
• 지금 - 당신은 당신의 "jquery.versionY.js"을 호출 $하고 jQueryversionY에 속하는 플러스 _$와 _jQueryversionX에 속한다.
• my_jQuery = jQuery.noConflict(true);- 지금 $과 jQueryversionX에 속하는, _$그리고 _jQuery아마 널 (null), 그리고 my_jQueryversionY이다.

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

사용 jQuery.noConflict():

<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의 두 번째 버전을로드 한 다음 원래 버전으로 복원하거나 이전에 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="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)})

데모

물론 가능합니다. 이 링크에는 https://api.jquery.com/jquery.noconflict/ 에 대한 세부 정보가 포함되어 있습니다 .