我的任务是创建一个代码片段，该代码片段将分发到多个网站以包含在它们的 HTML 中。此代码片段将呈现一个按钮，按下该按钮将启动一个灯箱，其中包含一个带有中央网站内容的 iframe。
我的想法是将 jQuery 与 Lightbox 插件(例如 colorbox)一起使用，但是包含此代码片段的网站可能包含较旧(或较新)版本的 jQuery 或已包含的不同框架，这很可能会导致问题。
我的问题是；如何以一种不会干扰其他版本的 jQuery 或其他框架的方式在网站中包含 jQuery？
另外，这是解决这个问题的最佳方法吗？有没有不使用框架的 Javascript Lightbox？
如有任何帮助，我们将不胜感激!
最佳答案
嗯，一般来说，在一个页面中添加多个js库会影响性能。这也适用于添加多个版本的库。在每次加载页面时，JQuery(和其他库)都必须运行相当多的测试才能知道要运行它自己的代码的哪一部分(以及每个版本)。大多数时候您不会注意到它，但在添加第二个库后它可能会成为一个问题。
也就是说，运行多个版本的 jQuery 很容易。将较新版本的 jQuery 设置为无冲突模式，同时给它一个不同的名称(jquery 让你将它的 $ 重命名为你想要的任何名称)，例如 $j2 或其他名称(只是确保它是兼容的)。此外，我认为它必须包含在旧版本之前，以免在进入无冲突模式之前发生冲突。然后在包含较新的 jquery 代码后立即将此行放在脚本标记中:
<script type='text/javascript'>
var $j2 = jQuery.noConflict();
</script>
您将正常加载 jQuery 的第二个版本。对更新的 jQuery 的任何后续调用都类似于:
$j2("myDiv")
就我个人而言，我是 colorbox 的忠实粉丝。我觉得这是目前最好的。它速度快、用途广泛且可 reshape 品牌。因此，通过更改 jQuery 名称和颜色框名称的能力，您可以像这样调用颜色框:
$ourBiz.fantasyBox({settings:etc});
当然，如果您的客户不看代码，他们不会注意到它，但它看起来很酷，是吗？我会先尝试一下，您可能会发现第二个库的性能影响甚至不明显。
如果您确实注意到性能下降，您可能想尝试以下方法之一:
- Lightbox JS - 原始灯箱之一。请注意，同一作者有一个 Lightbox 2，但它使用 Prototype & Scriptaculous
- HighSlide
- Floatbox
- TinyBox - 这个不像大多数一样通用，但速度很快，因此对于带有单张图片或内联内容的弹出窗口，这是一个不错的选择
关于Javascript 灯箱作为分布式代码片段的一部分，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7601815/