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

Question

我刚刚为我的网络应用创意做了一个概念/演示的证明，但是这个想法需要嵌入页面才能正常工作。

我现在已经完成了演示的开发，但现在我必须调整它，以便它可以在任何网站上的标签内工作。

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

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

我基本上有一个小的HTML文件，一些css和js文件，就是这样。有什么想法或建议吗？

Answer 1

如果你拥有的是script标签，并且想要注入UI / HTML /等。进入主页，这意味着iframe方法可能不是您想要的（尽管您可能采用混合方法）。因此，您需要做很多事情。

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

1. 您需要隔离JavaScript依赖项。例如，您无法加载破坏主页的库的版本。例如，jQuery可以在没有全局接管$符号的情况下加载。但是，并非所有图书馆都支持。
2. 您使用的任何样式也需要谨慎管理，以免在主页上出现问题。您可以动态加载样式，但是加载类似Bootstrap的东西可能会导致大多数页面出现问题，这些页面没有使用您需要的完全相同的版本。
3. 您希望快速加载核心Javascript文件并尽可能多地执行同步工作，以免影响整个页面加载时间（除非您的功能是必需的）。您需要查看来自Steve Souders的this等内容。
4. 您可以通过Web服务加载UI，也可以在本地构建它。
5. 如果您不想使用JSONP样式请求，则需要调查启用CORS。

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