Javascript 将web应用程序转换为可嵌入的标记

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

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

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

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

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

如果您只有一个脚本标记，并且希望将UI/HTML/等注入到主机页中，这意味着iframe方法可能不是您想要的，尽管您可以使用混合方法。所以，你需要做很多事情

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

您需要隔离JavaScript依赖项。例如，您不能加载破坏主机页的库版本。例如，jQuery可以在不全局接管$symbol的情况下加载。但是，并不是所有的图书馆都支持这一点。 您使用的任何样式也需要小心管理，以免在主机页上引起问题。您可以动态加载样式，但加载类似于引导的内容可能会在大多数使用与您所需版本不完全相同的页面上造成问题。 您需要快速加载核心Javascript文件，并尽可能多地执行异步工作，以避免影响整个页面加载时间，除非您的功能是必需的。你会想要回顾史蒂夫·苏德斯的内容。 您可以通过web服务加载UI，也可以在本地构建UI。 如果不想使用JSONP样式的请求，则需要研究启用。

---

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

它是一个位于页面右下角的按钮，用于嵌入脚本。因此，我怀疑iframe是否能胜任这种情况。这也是很多绝对位置的东西。谢谢@Tomshreads什么位置：绝对位置；跟什么都有关系？我不能在iframe之外定位东西，对吗？这个如果我需要在网站中间弹出一些东西，我就不能用iFrAME作为文档的宽和高。“那太傻了！”本杰明，你介意告诉我为什么你要在我的问题中删除“谢谢”吗？我的意思是，我很感谢那些愿意帮助我的人，我真的相信这是一个问题的重要组成部分，在我看来，这是我提问的方式。谢谢，祝你今天愉快！关于“谢谢”和其他类似的问候语，meta上有一个相当长的讨论。谢谢你的回答！不过我有一个担心。我正在使用的服务有点像getsatiafaction，它在页面上有一个按钮，弹出一个非模式对话框，他们可以在其中聊天。但我需要它是完全透明的，就像它真的集成在页面中一样。我担心的是，对于iframe，我仍然需要找到一种使用引导的方法，对吗？这是我现在的担心，我需要使用angularjs和bootstrap，这就是我完全迷失的地方。有什么建议吗？谢谢！iframe将被隔离，您可以在iframe内部使用引导。对于外部的任何东西，都不能使用引导，除非您对其进行了显著的定制。您可以使iframe透明，但您真的希望这样吗？因为你的风格在任意的网站设计上可能不好看。我可以选择透明的iframe，但我个人讨厌这样做。也许我可以制作自己的风格，而不是使用引导，但我仍然需要使用angularjs，我想我可以异步加载它。你知道我可以看什么代码示例来概括这一点吗？谢谢你的帮助！什么的代码示例？正如建议的那样，寻找创建bookmarklets的教程这里有一个：。他们通常需要做一些非常相似的事情。