javascript 在页面上包含两个版本的 jQuery 而不影响旧插件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10915263/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Include two versions of jQuery on a page without affecting old plugins
提问by gopivignesh.m
Our drupal site runs with jQuery version 1.2.1 which we have not upgraded.
我们的 drupal 站点使用 jQuery 1.2.1 版运行，但我们尚未升级。
The problem is this:
问题是这样的：
We need to add a new plugin named jQuery Tokeninput, but it's working only in latest jQuery versions. We tried adding the latest jQuery version with old version, but it produces weird results.
我们需要添加一个名为 jQuery Tokeninput 的新插件，但它仅适用于最新的 jQuery 版本。我们尝试在旧版本中添加最新的 jQuery 版本，但它产生了奇怪的结果。
My question is, how to include the latest jQuery file without affecting the old jQuery plugins?
我的问题是，如何在不影响旧的 jQuery 插件的情况下包含最新的 jQuery 文件？
回答by Farhan Ahmad
Method #1: (recommended)
方法#1：（推荐）
You could do something like this:
你可以这样做：
<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>
And this way when you want something made with the new version of jquery instead of the $use $jq.
这样，当您想要使用新版本的 jquery 而不是$使用$jq.
$jq('.selector').on('click', function(){
//do something
});
Method #2: (might break things on your site - not recommended)
方法#2：（可能会破坏您网站上的内容 - 不推荐）
In your template.phpfile:
在您的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);
}
}
Be sure to only do this on the frontend of your site. It can mess up admin toolbars if they are dependent on Drupal's version of jQuery.
请务必仅在您网站的前端执行此操作。如果管理工具栏依赖于 Drupal 的 jQuery 版本，它可能会弄乱管理工具栏。
回答by Nathan J.B.
The following script...
下面的脚本...
is completely backward compatiblewith pre-existing scripts
should have no side effects (except for obvious side effect of adding an additional JS download)
- allows any versions of jQuery in any order-- you can have the "default" be an old version of jQuery and the "additional" be a newer version, or vice versa.
与预先存在的脚本完全向后兼容
应该没有副作用（除了添加额外的JS下载有明显的副作用）
- 允许以任何顺序使用任何版本的 jQuery——您可以将“默认”设为旧版本的 jQuery，将“附加”设为较新版本，反之亦然。
How to use 2 versions of jQuery on the same page
如何在同一页面上使用 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>
See it in action here:
在这里查看它的实际效果：
Here's the entire HTML that you can drop in an html file to test
这是您可以放入 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>
回答by nmc
Just so you know, there is a jQuery update modulewhich will update jQuery versions for you without you having to code it. Look into it if it's of interest but I don't think that the module keeps the old jQuery version but rather replaces it with the new one.
正如您所知，有一个jQuery 更新模块可以为您更新 jQuery 版本，而您无需对其进行编码。如果感兴趣，请查看它，但我认为该模块不会保留旧的 jQuery 版本，而是将其替换为新版本。
I might also suggest that you try upgrading the version of jQuery and just using the latest one to see if it does indeed break other functionalities.
我也可能建议您尝试升级 jQuery 版本并仅使用最新版本来查看它是否确实破坏了其他功能。
