[Javascript] 동일한 페이지에서 여러 버전의 jQuery를 사용할 수 있습니까?



Answers

이것을보고 그것을 시도한 후에 나는 실제로 한 번에 하나 이상의 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();
        });
    });
Question

현재 작업중인 프로젝트는 고객의 웹 페이지에서 jQuery를 사용해야합니다. 고객은 <script> 생성 된 <iframe> 위젯을 빌드하는 몇 가지 <script> 요소가 포함 된 코드 묶음을 삽입합니다. 아직 jQuery의 최신 버전을 사용하고 있지 않다면 jQuery의 Google 호스팅 버전에 대한 <script> 도 포함됩니다.

문제는 일부 고객이 이전 버전의 jQuery를 이미 설치했을 수 있다는 점입니다. 적어도 상당히 최근 버전이라면이 코드가 작동하지만, 코드는 최근에 jQuery 라이브러리에 도입 된 기능에 의존하므로 고객의 jQuery 버전이 너무 오래되었을 때 인스턴스가 될 수밖에 없다. 최신 버전의 jQuery로 업그레이드 할 필요는 없습니다.

jQuery의 최신 버전을로드하여 코드의 컨텍스트 내에서만 사용하거나 고객 페이지의 모든 코드를 방해하거나 영향을주지 않을 방법이 있습니까? 이상적으로는 jQuery의 존재 여부를 확인하고 버전을 감지 할 수 있으며 너무 오래 되었다면 가장 최근 버전을로드하여 코드에만 사용하는 것이 좋습니다.

<script> 포함하는 고객 도메인의 <iframe> 에 jQuery를로드하는 아이디어가있었습니다. 실현 가능성이있는 것 같지만, 더 우아한 방법이 필요합니다. 여분의 <iframe> 의 성능 및 복잡성에 대한 처벌).




페이지에 원하는만큼 많은 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> 

DEMO | Source




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

Demo




Links