如何在同一页面上隔离不同的JavaScript库？

Question

假设我们需要在第三方页面中嵌入一个小部件.例如,这个小部件可能使用jquery,因此widget携带一个jquery库.假设第三方页面也使用jquery但使用不同的版本.嵌入小部件时如何防止它们之间发生冲突？jquery.noConflict不是一个选项,因为它需要为页面中加载的第一个jquery库调用此方法,这意味着第三方网站应该调用它.这个想法是第三方网站不应该修改或做任何事情,除了将带有src的标记放到窗口小部件以便使用它.

这也不是特别是jquery的问题 - 谷歌闭包库(甚至编译)可能作为一个例子.

除了明显的iframe之外,还有哪些解决方案来隔离不同的javascript库？也许加载javascript作为字符串,然后eval(通过使用函数('代码到eval'),而不是eval('代码到eval'))它在匿名函数中可能会做到这一点？

Answer 1

实际上,我认为jQuery.noConflict正是你想要使用的.如果我正确理解其实现,您的代码应如下所示:

(function () {
var my$;

// your copy of the minified jQuery source

my$ = jQuery.noConflict(true);
// your widget code, which should use my$ instead of $
}());

调用noConflict将全局jQuery和$对象恢复为以前的值.

Answer 2

Function(...)在你的函数中进行 eval ，这并没有更好。

为什么不使用iframe它们为第三方内容提供默认沙箱。

对于友好的用户，您可以在他们和您的页面之间共享文本数据，使用parent.postMessage现代浏览器或window.name针对老年人的黑客技术。