내가 작업중 인 프로젝트는 고객의 웹 페이지에서 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”가로드
$되고jQueryversionX에 속한다. - 지금 – 당신은 당신의 “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)})