我試圖嵌入一個使用jQueryUI的Web應用程序我進入第三方網站。我的web應用程序使用jQuery & jQueryUI(主要用於自動完成和一些較小的事情)。第三方網站也使用兩者。運行兩個版本的jQuery和兩個版本的jQueryUI
我的代碼假設jQueryUI的最新版本。第三方網站可能包含更舊的版本。
我有什麼選擇?我看到有關jQueryUI can be loaded twice或can 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,因此我需要應對這種可能性。
你看過noConflict嗎? –
@PWKad正如上面爲(4)建議的鏈接?我不完全明白如何將這一點應用於我的情況。 – fooquency
@fooquency檢查我的答案 – redV