2014-03-01 123 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。

相关问题