Question

我正在尝试使用jQueryUI将一个Web应用程序嵌入到第三方网站中。我的Web应用程序使用jQuery＆amp; jQueryUI（主要用于自动完成和一些较小的东西）。第三方网站也使用两者。

我的代码假设了一个非常新版本的jQueryUI。第三方网站可能包含更旧的版本。

我有什么选择？我看到有关jQueryUI can be loaded twice或can only be loaded once的报告存在冲突。但是，this SO question表明如果使用'CONTEXT'构建jQueryUI是可能的，但我找不到任何'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）我尝试按照建议on this page重新分配$和jquery，但我不明白为什么***上的代码显示旧版本的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的副本，按照建议here对(jquery)进行搜索和替换 - 听起来非常讨厌，维护噩梦！

4）this之类的东西？（虽然我不知道如何在我的情况下应用它，因为我不能在第一个jQuery上调用noConflict？）

5）其他一些选择？

另一个困难是我找不到有条件地包含jQuery / jQueryUI的方法 - 第三方网站可能实际上并没有加载jQuery / jQueryUI所以我也需要应对这种可能性。

Answer 1

所以你遇到的问题就是那个窗口。$和window.jQuery仍然匹配旧的jQuery，而jQuery-UI正在连接其中一个。如果你在库初始化之前使用noConflict，那么稍后恢复窗口。$和window.jQuery你应该没问题。 E.g。

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

编辑：所以我看到你现在的问题！如果在函数调用中添加对$ in的引用，例如：

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

应该修复它 - 但是，我想你有权访问它吗？

Answer 2

假设您之前将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运行实例。

运行两个版本的jQuery和两个版本的jQueryUI

2 个答案: