javascript - 基于 JavaScript 的模态/弹出服务(如 KissInsights 和 Hello Bar)如何工作？

Question

我正在为我的用户开发一个模态/弹出系统以嵌入他们的网站，按照 KissInsights 的思路和 Hello Bar(例如 here 和 here )。

构建这样的服务的最佳实践是什么？看起来用户嵌入了一些 JS，但该代码随后插入了额外的脚本标签。

我想知道它如何与网络服务通信以获取用户的内容等。

TIA

Answer 1

您是对的，通常这只是客户嵌入其网站的脚本。然而，接下来的事情就有点复杂了。

1。嵌入脚本

如上所述，第一步是在目标页面上有一个脚本。

本质上，这个脚本只是一段 JavaScript 代码。它与您自己页面上的内容非常相似。

此脚本应在您希望显示的客户页面上生成内容。

但是，您需要考虑一些事项:

• 您不能使用任何库(或者如果您使用，请务必小心使用):这些库可能会与页面上已有的内容发生冲突，并破坏客户的网站。你不想那样做。
• 切勿覆盖任何内容，因为覆盖可能会破坏客户的站点:这包括事件监听器、 native 对象属性等。例如，始终对事件使用 addEventListener 或 addEvent，因为它们允许您拥有多个监听器
• 您不能相信任何样式:您创建的所有样式的 HTML 元素都必须内联，因为客户的网站可能有自己的 CSS 样式。
• 您不能添加自己的任何 CSS 规则:这些规则可能会再次破坏客户的网站。

这些规则适用于您在客户网站上直接运行的任何脚本或内容。如果您创建一个 iframe 并在那里显示您的内容，您可以在框架内的任何内容中忽略这些规则。

2。在您的服务器上处理脚本

您的可嵌入脚本通常应由服务器上的脚本生成。这允许您包含逻辑，例如根据参数或应用程序数据库中的数据选择要显示的内容。

这可以用您喜欢的任何语言编写。

通常，您的脚本 URL 应包含某种标识符，以便您知道要显示什么。例如，您可以使用 ID 来判断它是哪个客户的网站或其他类似信息。

如果您的应用程序需要用户登录，您可以像往常一样处理它。服务器端脚本被其他网站调用这一事实没有任何区别。

嵌入式脚本与您的服务器或框架之间的通信

这也有一些技巧。

您可能知道，XMLHttpRequest 不能跨不同域工作，因此您不能使用它。

从其他站点发送数据的最简单方法是使用 iframe 并让用户在 iframe 内提交表单(或在框架内运行 XMLHttpRequest，因为 iframe 的内容驻留在您自己的服务器上，因此是没有跨域通信)

如果您的嵌入式脚本在 iframe 对话框中显示内容，您可能需要能够告诉嵌入在客户网站上的脚本何时关闭 iframe。例如，这可以通过使用 window.postMessage

来实现

关于 postMessage，请参阅 http://ejohn.org/blog/cross-window-messaging/

关于跨域通信，参见http://softwareas.com/cross-domain-communication-with-iframes