Một dự án tôi đang làm việc yêu cầu sử dụng jQuery trên các trang web của khách hàng. Khách hàng sẽ chèn một đoạn mã mà chúng tôi sẽ cung cấp, bao gồm một vài <script>yếu tố xây dựng tiện ích được <script>xử lý <iframe>. Nếu họ chưa sử dụng phiên bản jQuery mới nhất, thì điều này cũng sẽ bao gồm (rất có thể) một <script>phiên bản jQuery được lưu trữ của Google.

Vấn đề là một số khách hàng có thể đã cài đặt phiên bản jQuery cũ hơn. Mặc dù điều này có thể hoạt động nếu ít nhất là phiên bản gần đây, mã của chúng tôi dựa vào một số chức năng được giới thiệu gần đây trong thư viện jQuery, do đó, chắc chắn sẽ có trường hợp khi phiên bản jQuery của khách hàng quá cũ. Chúng tôi không thể yêu cầu họ nâng cấp lên phiên bản jQuery mới nhất.

Có cách nào để tải phiên bản jQuery mới hơn để chỉ sử dụng trong ngữ cảnh mã của chúng tôi, điều đó sẽ không can thiệp hoặc ảnh hưởng đến bất kỳ mã nào trên trang của khách hàng không? Lý tưởng nhất, có lẽ chúng ta có thể kiểm tra sự hiện diện của jQuery, phát hiện phiên bản và nếu nó quá cũ, thì bằng cách nào đó hãy tải phiên bản mới nhất chỉ để sử dụng cho mã của chúng tôi.

Tôi đã có ý tưởng tải jQuery trong một <iframe>miền của khách hàng bao gồm cả chúng tôi <script>, có vẻ như nó khả thi, nhưng tôi hy vọng có một cách thanh lịch hơn để làm điều đó (không đề cập đến mà không có hình phạt về hiệu năng và độ phức tạp của thêm <iframe>s).

Có, nó có thể thực hiện được do chế độ noconflict của jQuery. http://blog.nemikor.com/2009/10/03/USE-multipl-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>

Sau đó, thay vì $('#selector').function();, bạn sẽ làm jQuery_1_3_2('#selector').function();hoặc jQuery_1_1_3('#selector').function();.

Sau khi xem xét điều này và dùng thử, tôi thấy nó thực sự không cho phép nhiều hơn một trường hợp jquery chạy cùng một lúc. Sau khi tìm kiếm xung quanh, tôi thấy rằng đây chỉ là một mẹo nhỏ và ít mã hơn rất nhiều.

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

Vì vậy, sau đó thêm "j" sau "$" là tất cả những gì tôi cần làm.

$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();
        });
    });

Lấy từ http://forum.jquery.com/topic/multipl-versions-of-jquery-on-the-same-page :

• Trang gốc tải "jquery.versionX.js" của anh ấy - $và jQuerythuộc về phiên bảnX.
• Bạn gọi "jquery.versionY.js" của mình - ngay bây giờ $và jQuerythuộc về phiên bảnY, cộng _$và _jQuerythuộc về phiên bảnX.
• my_jQuery = jQuery.noConflict(true);- bây giờ $và jQuerythuộc về phiên bảnX, _$và _jQuerycó thể là null và my_jQuerylà phiên bảnY.

Bạn có thể có nhiều phiên bản jQuery khác nhau trên trang của mình như bạn muốn.

Sử dụng 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 | Nguồn

Có thể tải phiên bản thứ hai của jQuery sử dụng nó và sau đó khôi phục lại phiên bản gốc hoặc giữ phiên bản thứ hai nếu không có jQuery được tải trước đó. Đây là một ví dụ:

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

Tôi muốn nói rằng bạn phải luôn sử dụng các phiên bản ổn định mới nhất hoặc gần đây của jQuery. Tuy nhiên nếu bạn cần thực hiện một số công việc với các phiên bản khác thì bạn có thể thêm phiên bản đó và đổi tên thành $một số tên khác. Ví dụ

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

Nhìn vào đây nếu bạn viết một cái gì đó bằng cách sử dụng $thì bạn sẽ có được phiên bản mới nhất. Nhưng nếu bạn cần làm bất cứ điều gì với cũ thì chỉ cần sử dụng $oldjQuerythay vì $.

Đây là một ví dụ

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

Bản giới thiệu

Hoàn toàn có, bạn có thể. Liên kết này chứa chi tiết về cách bạn có thể đạt được điều đó: https://api.jquery.com/jquery.noconflict/ .