在页面上包含两个版本的jQuery，而不会影响旧插件

Question

我们的drupal站点运行jQuery版本1.2.1，我们还没有升级。

问题是这样的：

我们需要添加一个名为jQuery Tokeninput的新插件，但它只适用于最新的jQuery版本。 我们尝试使用旧版本添加最新的jQuery版本，但它会产生奇怪的结果。

我的问题是，如何在不影响旧的jQuery插件的情况下包含最新的jQuery文件？

Answer 1

方法＃1 :(推荐）

你可以这样做：

<script type='text/javascript' src='js/jquery_1.7.1.js'></script>   
<script type='text/javascript'>  
 // In case you wonder why we pass the "true" parameter,
 // here is the explanation:
 //   - When you use jQuery.noConflict(), it deletes
 //     the "$" global variable.
 //   - When you use jQuery.noConflict(true), it also
 //     deletes the "jQuery" global variable.
 var $jq = jQuery.noConflict(true);  
</script>  
<script type='text/javascript' src='js/jquery_1.2.1.js'></script>

这种方式当你想要用新版本的jquery而不是$ use $jq 。

$jq('.selector').on('click', function(){  
    //do something  
});

方法＃2 :(可能会破坏您网站上的内容 - 不推荐）

在template.php文件中：

<?php
function {theme_name}_preprocess(&$vars, $hook) {
if (arg(0) != 'admin' && $hook == "page") {
// Get an array of all JavaScripts that have been added
$javascript = drupal_add_js(NULL, NULL, 'header');

// Remove the original jQuery library
unset($javascript['core']['misc/jquery.js']);

// Add in our new jQuery library
// We do it this way to keep the includes in the same order
$core = array(
//Alternative jQuery
drupal_get_path('theme', '{theme_name}').'/js/libs/jquery-1.7.1.min.js' => array(
'cache' => TRUE,
'defer' => FALSE,
)
);

// Merge back into the array of core JavaScripts
$javascript['core'] = array_merge($javascript['core'], $core);

// Rerender the block of JavaScripts
$vars['scripts'] = drupal_get_js(NULL, $javascript);
}
}

请务必仅在您网站的前端执行此操作。 如果它们依赖于Drupal的jQuery版本，它可能会弄乱管理工具栏。

Answer 2

以下脚本......

完全向后兼容预先存在的脚本
应该没有副作用（除了添加额外JS下载的明显副作用）
允许任何版本的jQuery以任何顺序 - 你可以让“默认”是旧版本的jQuery，“附加”是更新版本，反之亦然。

如何在同一页面上使用2个版本的jQuery

<!-- IMPORTANT: ORDER is vital. Do not change the order of the following. -->

<script src="//code.jquery.com/jquery-1.4.2.min.js"></script>
<script>
    // Save original jQuery version to another variable
    var $Original = jQuery.noConflict(true);
</script>

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
    // Save new jQuery version to another variable
    var $v1_11_0 = jQuery.noConflict(true);

    // Replace the original jquery version on $ and jQuery so pre-existing scripts don't break
    // No need to declare "var" here since the $ and jQuery still exist as "undefined"
    $ = $Original;
    jQuery = $Original;

    // Optional: Here I'm saving new jQuery version as a method of "$" -- it keeps it more organized (in my opinion)
    $.v1_11_0 = $v1_11_0;
</script>

在这里看到它：

http://jsfiddle.net/dd94h/

这是您可以放入html文件进行测试的整个HTML

<!DOCTYPE html>
<html>
<head>
    <title>jQuery within jQuery</title>
    <style media="all" type="text/css">
        h1 span { font-weight: normal; }
    </style>

    <!-- IMPORTANT: ORDER is vital. Do not change the order of the following. -->

    <script src="//code.jquery.com/jquery-1.4.2.min.js"></script>
    <script>
        // Save original jQuery version to another variable
        var $Original = jQuery.noConflict(true);
    </script>

    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
        // Save new jQuery version to another variable
        var $v1_11_0 = jQuery.noConflict(true);

        // Replace the original jquery version on $ and jQuery so pre-existing scripts don't break
        // No need to declare "var" here since the $ and jQuery still exist as "undefined"
        $ = $Original;
        jQuery = $Original;

        // Optional: Here I'm saving new jQuery version as a method of "$" -- it keeps it more organized (in my opinion)
        $.v1_11_0 = $v1_11_0;
    </script>
</head>
<body>
<h1>Default jQuery: <span id="default-jquery">Loading...</span></h1>
<h1>Additional jQuery: <span id="additional-jquery">Loading...</span></h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id felis quam. Morbi ultrices nisi vel odio vestibulum nec faucibus diam congue. Etiam cursus, turpis id rutrum adipiscing, ligula justo rhoncus ipsum, sed posuere diam orci vel mi. Etiam condimentum tincidunt metus, non dictum ligula hendrerit et. Nulla facilisi. Aenean eleifend volutpat nibh, eu tempor nulla auctor ac. Proin ultrices cursus scelerisque. Curabitur sem sapien, tempus et dictum nec, viverra vel odio. Nulla ullamcorper nisl a dolor laoreet eu eleifend tellus semper. Curabitur vitae sodales nisl. Donec tortor urna, viverra sed luctus in, elementum sit amet turpis.</p>

<script>
    // Continue to use "$" for the original jQuery version
    $( document ).ready(function(){
        $('#default-jquery').text($().jquery);
    });

    // Use $.v1_11_0(...) for the newly-added version
    $.v1_11_0( document ).ready(function(){
        $.v1_11_0('#additional-jquery').text($.v1_11_0().jquery);
    });
</script>
</body>
</html>

Answer 3

您知道，有一个jQuery更新模块，它将为您更新jQuery版本，而无需您编写代码。 如果感兴趣，请查看它，但我不认为该模块保留旧的jQuery版本，而是将其替换为新版本。

我可能还建议您尝试升级jQuery的版本，并使用最新的版本来查看它是否确实打破了其他功能。

在页面上包含两个版本的jQuery，而不会影响旧插件

问题描述

3 个解决方案

解决方案1
7 已采纳 2012-06-06 13:35:21

解决方案2
3 2014-03-18 22:56:20

如何在同一页面上使用2个版本的jQuery

在这里看到它：

这是您可以放入html文件进行测试的整个HTML

解决方案3
0 2012-06-06 14:08:12

在页面上包含两个版本的jQuery，而不会影响旧插件

问题描述

3 个解决方案

解决方案1 7 已采纳 2012-06-06 13:35:21

解决方案2 3 2014-03-18 22:56:20

如何在同一页面上使用2个版本的jQuery

在这里看到它：

这是您可以放入html文件进行测试的整个HTML

解决方案3 0 2012-06-06 14:08:12

解决方案1
7 已采纳 2012-06-06 13:35:21

解决方案2
3 2014-03-18 22:56:20

解决方案3
0 2012-06-06 14:08:12