2014-03-01 166 views
0

我試圖嵌入一個使用jQueryUI的Web應用程序我進入第三方網站。我的web應用程序使用jQuery & jQueryUI(主要用於自動完成和一些較小的事情)。第三方網站也使用兩者。運行兩個版本的jQuery和兩個版本的jQueryUI

我的代碼假設jQueryUI的最新版本。第三方網站可能包含更舊的版本。

我有什麼選擇?我看到有關jQueryUI can be loaded twicecan only be loaded once的報告有衝突。然而,this SO question表明,如果jQueryUI是用'CONTEXT'構建的,但我找不到任何'CONTEXT'的含義。

在這裏,在大綱是我想要做的事:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
    <head> 
     <!-- Some version of jQuery and jQueryUI - may change --> 
     <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
     <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.18/jquery-ui.min.js"></script> 
    </head> 
<body> 

<script type="text/javascript"> 
    // some third-party jQuery & jQueryUI stuff here 
</script> 

<!-- Up to this point, I cannot make any changes to the code, as all of the above is third-party code --> 


<!-- Start of MY application --> 

    <!-- Load jQuery and jQueryUI --> 
    <script src="/jquery-ui-1.10.4.custom/js/jquery-1.10.2.js"></script> 
    <script src="/jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.js"></script> 

    <!-- Application code, which wants to use jquery-1.10.2 and jquery-ui-1.10.4 --> 
    <input name="foo" /> 
    <script language="javascript" type="text/javascript"> 
     alert('START OF AUTOCOMPLETE jQuery version: ' + $.fn.jquery + '; jQueryUI version: ' + $.ui.version); 

     function addAutocomplete (inputElement, options) { 

      // Run on document ready 
      $(function() { 
       alert('WITHIN CODE: ' + $.fn.jquery + '; jQueryUI version: ' + $.ui.version); 
       <!-- *** Currently this gives "WITHIN CODE: 1.7.1; jQueryUI version: 1.8.18" --> 
       <!-- *** But what I want is WITHIN CODE: 1.10.2; jQueryUI version: 1.10.4" --> 
      }) 
     }; 
     addAutocomplete('foo'); 
    </script> 

    <!-- End of MY application --> 


<!-- From this point, I cannot make changes to the code - is third-party code which could include jQuery/jQueryUI code potentially --> 


</body> 
</html> 

我有哪些選擇?我正在把我的頭髮撕掉!

1)我已經試過重新分配$jquery,作爲建議on this page,但我不明白爲什麼在***的代碼顯示了舊版本jQueryUI的的:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
    <head> 
     <!-- Some version of jQuery and jQueryUI - may change --> 
     <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
     <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.18/jquery-ui.min.js"></script> 
    </head> 
<body> 

<script type="text/javascript"> 
    // some third-party jQuery & jQueryUI stuff here 
</script> 

<!-- Up to this point, I cannot make any changes to the code, as all of the above is third-party code --> 


<!-- Start of MY application --> 

    <script type="text/javascript"> 
     alert('START jQuery version: ' + $.fn.jquery + '; jQueryUI version: ' + $.ui.version); 
     var oldJQuery = jQuery; 
     var oldDollar = $; 
    </script> 


    <script src="/jquery-ui-1.10.4.custom/js/jquery-1.10.2.js"></script> 
    <script src="/jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.js"></script> 
    <script type="text/javascript"> 
     alert('REPLACED jQuery version: ' + $.fn.jquery + '; jQueryUI version: ' + $.ui.version); 
    </script> 


    <!-- Application code, which wants to use jquery-1.10.2 and jquery-ui-1.10.4 --> 
    <input name="foo" /> 
    <script language="javascript" type="text/javascript"> 
     alert('START OF AUTOCOMPLETE jQuery version: ' + $.fn.jquery + '; jQueryUI version: ' + $.ui.version); 

     function addAutocomplete (inputElement, options) { 

      // Run on document ready 
      $(function() { 
       alert('WITHIN CODE: ' + $.fn.jquery + '; jQueryUI version: ' + $.ui.version); 
       <!-- *** Currently this gives "WITHIN CODE: 1.7.1; jQueryUI version: 1.8.18" --> 
       <!-- *** But what I want is WITHIN CODE: 1.10.2; jQueryUI version: 1.10.4" --> 
      }) 
     }; 
     addAutocomplete('foo'); 
    </script> 


    <script language="javascript" type="text/javascript"> 
     // var rnSDJQ = jQuery; 
     window.jQuery = oldJQuery; 
     window.$ = oldDollar; 
     alert('AFTER jQuery version: ' + $.fn.jquery + '; jQueryUI version: ' + $.ui.version); 
    </script> 

<!-- End of MY application --> 


<!-- From this point, I cannot make changes to the code - is third-party code which could include jQuery/jQueryUI code potentially --> 


</body> 
</html> 

這種方法看起來很相似到this但我認爲只適用於jQuery - jQueryUI顯然是doesn't have a similar noConflict方法。

2)重寫我的應用程序代碼,只承擔jQuery和jQueryUI的早期版本?

3)作出jQueryUI的副本和做搜索和替換上(jquery)的建議here - 聽起來很討厭,而且維護的噩夢!

4)喜歡的東西this? (雖然我不能看到如何應用它在我的情況,因爲我不能推測調用noConflict第一jQuery的?)

5)其他一些選項?

另一個困難是我無法找到一種有條件地包含jQuery/jQueryUI的方法 - 第三方網站可能實際上並未加載jQuery/jQueryUI,因此我需要應對這種可能性。

+0

你看過noConflict嗎? –

+0

@PWKad正如上面爲(4)建議的鏈接?我不完全明白如何將這一點應用於我的情況。 – fooquency

+0

@fooquency檢查我的答案 – redV

回答

3

所以,你遇到的問題是窗口。$和window.jQuery仍然匹配舊的jQuery和jQuery的UI被連接到其中的一個。如果您在庫的初始化之前使用noConflict,那麼稍後將恢復窗口。$和window.jQuery,您應該沒問題。例如。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
    <head> 
     <!-- Some version of jQuery and jQueryUI - may change --> 
     <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
     <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.18/jquery-ui.min.js"></script> 
    </head> 
    <body> 

     <script type="text/javascript"> 
      // some third-party jQuery & jQueryUI stuff here 
     </script> 

    <!-- Up to this point, I cannot make any changes to the code, as all of the above is third-party code --> 


    <!-- Start of MY application --> 

     <script type="text/javascript"> 
      alert('START jQuery version: ' + $.fn.jquery + '; jQueryUI version: ' + $.ui.version); 
      var jq171 = $.noConflict(true); 
     </script> 


     <script src="/jquery-ui-1.10.4.custom/js/jquery-1.10.2.js"></script> 
     <script src="/jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.js"></script> 
     <script type="text/javascript"> 
      alert('REPLACED jQuery version: ' + $.fn.jquery + '; jQueryUI version: ' + $.ui.version); 
     </script> 

     <script src="/autocomplete.js"></script> 
     <input name="foo" /> 
     <script language="javascript" type="text/javascript"> 
      function addAutocomplete (inputElement, options) { 

       // Run on document ready 
       $(function($) { 
        alert('WITHIN CODE: ' + $.fn.jquery + '; jQueryUI version: ' + $.ui.version);      
        <!-- *** Should give WITHIN CODE: 1.10.2; jQueryUI version: 1.10.4" --> 
       }); 
      }; 

      addAutocomplete('foo'); 
      <!-- *** If I do console.log ($.ui.version); within the $(function() { ... } block in this file, it should show the new one --> 
     </script> 


     <script language="javascript" type="text/javascript"> 
      window.jQuery = jq171; 
      window.$ = jq171; 
      alert('AFTER jQuery version: ' + $.fn.jquery + '; jQueryUI version: ' + $.ui.version); 
     </script> 

    <!-- End of MY application --> 


    <!-- From this point, I cannot make changes to the code - is third-party code which could include jQuery/jQueryUI code potentially --> 


    </body> 
</html> 

編輯:所以我現在看看你的問題是什麼!如果您在到$一個引用添加到函數調用,例如:

$(function($) { ... }); 

這應該修復它 - 但是,我想你可以訪問嗎?

+0

謝謝,歡迎來到StackOverflow!但是,我仍然發現應用程序代碼正在獲得早期版本,而不是後來的版本,所以這仍然是不正確的。我更新了代碼以提供特定的應用程序代碼示例。請參閱上面的***兩行。 – fooquency

+0

謝謝 - 那個測試用例似乎現在給出了正確的結果。我現在試着把它放到代碼中,並從那裏看到。我仍然不清楚'$(function($)'''東西,因爲文件中有幾個函數需要打包 - 但這是向前邁進的一步 - 謝謝! – fooquency

+0

因此,$ (function($){...});確保函數內部的$與jquery調用它相同,如果你做了jq171(function($){...})$ inside函數將是jq171 – Zeripath

0

有這裏要補充的答案無法評論(潛行者),但是Zeripath似乎是在右邊線使用jQuery 1.7.1的重新分配。但是...

你還需要重新分配jQuery用戶界面?

+0

謝謝你的迴應。 Zeripath給出的例子已經起作用了,似乎有道理。 – fooquency

0

假設你將jQuery文件加載到第三方頁面之前,這裏是方法。

加載你的第一個jQuery的文件加載您的jQuery UI文件

<script src="jquery-min.js"></script> 
<script src="jquery.ui.js"></script> 

後來,即使你的第三方頁面加載jQuery和jQuery UI的檢查類似下面

if(window._$ and window._jQuery){ 
    /* 
     _$ is jQuery that you have loaded. As jQuery UI will be bind to 
     running jQuery version you can start using _$ for jQuery UI too 
    */ 

}else{ 
    // None has loaded other jQuery versions. You can use $ 
} 

jQuery.noConflict()爲您提供最新的運行實例的jQuery。

相關問題