在iframe中重定向jQuery以修改父文档

Question

我有一个我正在尝试的用例 - 将许多不同的JS库沙盒化为隐藏的iframe。在站点中，可能有许多小部件，都来自同一个域，可能需要不同版本的js库。为了防止全局冲突，我认为将所有必需的库放入iframe会很有趣。所以在一个iframe中我可能有jQuery 1.7.1，但在其他iframe中可能有更旧的东西。我想要做的是让每个iframe上运行的代码能够对主窗口进行更改。通过调整jQuery源代码中的“document”变量来指向“var document = top.document。

，我能够完成这项工作。

使用这种方法，我能够在iframe中执行$（“body”）。append（'test“）并让它修改父文档。

有人能建议更好的方法来做这样的事吗？还是更好的沙盒方法？

Answer 1

如果您不想编辑jQuery，我相信这有效：

$(document, parent.window.document).contents().find('body').append('test');

这样，您也可以使用iframe中的jQuery lib，但是如果您隐藏它们，那么您的解决方案可能更适合您的目的。