Hai phiên bản khác nhau của JQuery trong cùng một trang HTML

Question

Tôi có một tài liệu HTML mà tôi đã tham chiếu jQuery phiên bản 1.2.2 trong tiêu đề cho hộp đựng và tôi đã tham chiếu sau jQuery 1.7.1 ngay trước thẻ </body> dành cho trình chiếu hình ảnh.

Vấn đề là thickbox sẽ không hoạt động trừ khi tham chiếu cho jQuery 1.7.1 bị xóa, sau đó dừng trình chiếu hoạt động.

Tôi đã googled xung quanh để tìm hiểu về sự kiện xung đột $ nhưng không có giải pháp được đề xuất nào hoạt động.

Phổ biến nhất tôi đã thấy và đã cố gắng là: var $j = jQuery.noConflict();

Làm thế nào tôi có thể giải quyết này?

Answer 1

Nếu các plug-ins được well-behaved, sau đó điều này sẽ làm việc:

<script src="jquery-1.2.2.js"></script> 
<script src="thickbox.js"></script> 
<script src="jquery-1.7.1.js"></script> 
<script src="slideshow.js"></script> 

(Rõ ràng là những tên kịch bản được tạo thành.) Here's an example (source) (Tôi sử dụng jQuery 1.4. 2 và jQuery 1.7.1 vì Google không lưu trữ 1.2.2).

Các công trình trên với well-behaved plug-ins vì một well-behaved plug-in không dựa trên toàn cầu $ ở tất cả, nhưng thay vì sử dụng giá trị của jQuery toàn cầu như khi nó đã được nạp và lấy một tham chiếu đến nó trong một đóng cửa, sau đó sử dụng mà tài liệu tham khảo địa phương trong cả mã các plug-in của, như thế này:

// Example plug-in setup 
(function($) { 
    // ...Plug-in code using `$` here -- note it's a *local* `$`, 
    // not the global `$`, and not the global `jQuery`... 
})(jQuery); 

hoặc

(function() { 
    var $ = jQuery; 

    // ...Plug-in code using `$` here -- note it's a *local* `$`, 
    // not the global `$`, and not the global `jQuery`... 
})(); 

Cả hai của những người lấy toàn cầuGiá trịtính đến thời điểm plugin được tải và sau đó sử dụng bí danh cục bộ của chúng trong suốt.

Nếu các plug-in muốn chờ đợi cho sự kiện đã sẵn sàng, nó cũng có thể làm điều này:

jQuery(function($) { 
    // ...Plug-in code using `$` here -- note it's a *local* `$`, 
    // not the global `$`, and not the global `jQuery`... 
}); 

... trong đó sử dụng các chức năng jQuery chuyển vào xử lý sẵn sàng.

Bất kỳ trong số ba tính năng này sẽ hoạt động chính xác (với hộp thư đến xem jQuery 1.2.2 và trình chiếu xem jQuery 1.7.1) với thứ tự tải tập lệnh được liệt kê ở trên.

Nhưng "nếu" trong câu mở đầu của tôi là lớn "nếu". Rất nhiều plug-in không được viết để chống đạn theo cách này.

---

Các bất kể ở trên, tôi sẽ di chuyển ra khỏi bất kỳ plug-in mà đòi hỏi jQuery 1.2.2 để làm việc, và nếu có thể (và đó là gần như luôn càng tốt) tránh được việc phải nạp hai các phiên bản khác nhau của bất kỳ thư viện nào, bao gồm jQuery, trong cùng một trang.

Answer 2

Tôi sẽ không khuyên bạn nên sử dụng hai phiên bản jQuery khác nhau. Có một số lựa chọn thay thế khác để thickbox hoạt động hoàn hảo với jQuery mới nhất.

Answer 3

<script src="http://code.jquery.com/jquery-1.2.2.min.js"></script> 
<script type="text/javascript"> 
    var jQ122 = jQuery.noConflict(); 
</script> 
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
<script type="text/javascript"> 
    var jQ171 = jQuery.noConflict(); 


    (function($) { 
    $(function() { 
     // here $ is jQuery 1.2.2 
    }); 
    })(jQ122); 


    (function($) { 
    $(function() { 
     // here $ is jQuery 1.7.1 
    }); 
    })(jQ171); 
</script> 

Answer 4

Những gì bạn muốn làm là một thói quen rất xấu (bạn thực sự nên di chuyển tất cả các mã lên phiên bản giống nhau) nhưng nó về mặt lý thuyết có thể được thực hiện ...

Bạn sẽ cần phải thực hiện thay đổi đối với plugin tương ứng anyways tho ... xem xét mã này:

<script src="jquery-1.4.js"></script> 
var jQuery14 = jQuery; 
<script src="jquery-1.7.js"></script> 
var jQuery17 = jQuery; 

sau đó bạn sẽ thay đổi mã của các plugin của mình tại điểm mà jQuery được giao cho các plugin, trong đó sẽ trông giống như thế này:

(function($){ 
    // all your plugins code would be here 
})(jQuery);  // replace "jQuery" with one of your respective jQuery14/jQuery17 versions/variables 

Hãy thông báo .. điều này là vô cùng lộn xộn khi nói ít nhất! viết mã sạch hoặc thanh toán sau! :)

Answer 5

Mặc dù bạn có thể sử dụng jQuery.noConflict(); để khai báo các phiên bản riêng biệt của jQuery cùng một lúc.

Tôi thường gặp một số vấn đề với IE8 với một số thư viện nhất định khi tôi làm điều đó.

Vì vậy, giải pháp thay thế sẽ là sử dụng iframe để tải trang trong trang hiện tại của bạn.

Có phiên bản jQuery nhất định trên một trang và phiên bản khác của jQuery trên một trang.

Ví dụ:

<iframe frameborder="0" width="700" height ="400" scrolling="no" seamless="seamless" src="your.html"></iframe>