基于JavaScript的模式/弹出服务如KissInsights和Hello Bar如何工作？

Question

我正在为我的用户开发一个模态/弹出系统,以嵌入他们的网站,沿着KissInsights和Hello Bar(这里和这里的例子)的方式.

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

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

TIA

Answer 1

你是对的,通常它只是客户嵌入他们网站的脚本.然而,之后发生的事情有点复杂.

1.嵌入脚本

所说的第一步是在目标页面上有一个脚本.

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

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

但是,您需要考虑以下事项:

不能使用任何库(或如果你这样做,必须非常小心,你用什么):这可能与那些已经在页面上发生冲突,并打破了客户的网站.你不想那样做.
永远不要覆盖任何东西,因为重写可能会破坏客户的网站:这包括事件监听器,本机对象属性等等.例如,始终使用addEventListener或addEvent使用事件,因为这些允许您拥有多个侦听器
您不能信任任何样式:您创建的所有样式的HTML元素都必须内联,因为客户的网站可能有自己的CSS样式.
您无法添加自己的任何CSS规则:这些规则可能会再次破坏客户的网站.

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

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

这可以用你喜欢的任何语言编写.

通常,您的脚本URL应包含某种标识符,以便您知道要显示的内容.例如,您可以使用该ID来告知客户的网站或其他类似的内容.

如果您的应用程序要求用户登录,您可以像平常一样处理此问题.服务器端脚本被其他网站调用的事实没有区别.

这也有一些技巧.

您可能知道,XMLHttpRequest不适用于不同的域,因此您无法使用它.

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

如果嵌入式脚本在iframe对话框中显示内容,则可能需要能够告知客户站点上嵌入的脚本何时关闭iframe.这可以通过例如使用来实现window.postMessage