javascript - 将 Web 应用程序转换为可嵌入的 <script> 标记

Question

我刚刚为我的网络应用想法做了一个概念验证/演示，但该想法需要嵌入到页面中才能正常工作。

我现在已经完成了演示的开发，但现在我必须对其进行调整，以便它可以在任何网站的标签内运行。

这里的问题是:如何在不破坏主网站的样式表和 JavaScript 的情况下实现这一目标？

这是一个基于 node.js/socket.io/angularjs/bootstrap 的应用程序，供您引用。

我基本上有一个小的 HTML 文件、一些 css 和 js 文件，仅此而已。有什么想法或建议吗？

Answer 1

如果您只有一个 script 标记，并且您想注入(inject) UI/HTML/等。进入主页，这意味着 iframe 方法可能不是您想要的(尽管您可以采用混合方法)。因此，您需要做很多事情。

首先，我建议您研究一下小书签的一般概念。虽然它不完全是您想要的，但它非常相似。创建小书签的问题非常相似:

1. 您需要隔离 JavaScript 依赖项。例如，您无法加载破坏主页的库版本。例如，jQuery 可以在不全局接管 $ 符号的情况下加载。但是，并非所有图书馆都支持这一点。
2. 您使用的任何样式也需要仔细管理，以免在主页上引起问题。您可以动态加载样式，但加载 Bootstrap 之类的内容可能会在大多数未使用与您所需版本完全相同的页面上导致问题。
3. 您会希望核心 Javascript 文件能够快速加载，并尽可能多地执行异步工作，以免影响整个页面加载时间(除非您的功能是必需的)。您需要查看类似 this 的内容来自史蒂夫·苏德斯。
4. 您可以通过网络服务加载您的 UI，也可以在本地构建它。
5. 如果您不想使用 JSONP 样式请求，则需要研究启用 CORS .

您可以使用 iframe 和 PostMessage显示一些 UI，而不需要对您拥有的各种应用程序依赖项进行复杂的包装/重新映射。 PostMessage 允许您发送消息来告诉监听 iFrame 在任何给定点“做什么”，而在主机页面中运行的代码可以将 iframe 移动/操作到位。多年来，许多流行的嵌入式 API 都使用了这种技术。我认为 DropBox 正在使用它。