javascript - 删除 iframe 并防止与库冲突

Question

我们有一个制作 carrusel 图像的应用程序，我们正在使用 iframe 插入网页。

我们想删除 iframe，我们已经准备好只使用一个 div，我们的用户将在他们的页面中插入这样的东西:

<script src="https://www.example.com/mycustom-carrusel.min.js"></script>
<div id="custom-unique-id" style="width:100%;height:300px;"></div>

mycustom-carrusel.min.js 使用 gulp 压缩了我们所有的代码。

我们的 javascript 将调用我们的 API 并在 div 中绘制所有必要的内容，问题是我们正在使用一些库，例如 jQuery 和其他库。

我们希望防止与 jQuery 或任何其他可能与用户网页发生冲突的库发生冲突。

实现这一点并防止与我们的代码发生任何可能的冲突的最佳技术是什么？

谢谢!

Answer 1

将样式和脚本与嵌入小部件的页面隔离正是通常使用 iframe 的原因。继续使用 iframe。

在将来(一旦在所有流行的浏览器中实现)，您可以使用 all 而不是 iframe值为 unset 的 CSS 属性, initial , 或 revert , 为您的小部件元素及其嵌套元素重置所有继承的样式，然后安全地应用您自己的样式。

对于一般的 JS 库，可能没有通用的方法来防止冲突，但对于 jQuery，您可以使用 jQuery.noConflict(true)释放 $ 和 jQuery 变量，使其他库(包括不同版本的 jQuery 本身)可以重用这些变量，但前提是您能够包括您的 jQuery 版本并调用 jQuery.noConflict(true)在页面自己的 jQuery 版本之前(这不太可能)。或者，完全摆脱使用库(在大多数情况下，目前实际上不需要像 jQuery 这样的库)，而是使用您自己的 vanilla-JS 脚本，或者，如果您真的不能放弃使用库，请尝试包装库的代码(以及您自己使用该库的代码)在自执行的匿名函数中，以防止它定义的变量泄漏到全局命名空间。