gpt4 book ai didi

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

转载 作者:数据小太阳 更新时间:2023-10-29 04:32:53 25 4
gpt4 key购买 nike

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

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

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

TIA

最佳答案

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

1。嵌入脚本

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

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

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

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

  • 您不能使用任何库(或者如果您使用,请务必小心使用):这些库可能会与页面上已有的内容发生冲突,并破坏客户的网站。你不想那样做。
  • 切勿覆盖任何内容,因为覆盖可能会破坏客户的站点:这包括事件监听器、 native 对象属性等。例如,始终对事件使用 addEventListeneraddEvent,因为它们允许您拥有多个监听器
  • 您不能相信任何样式:您创建的所有样式的 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

关于javascript - 基于 JavaScript 的模态/弹出服务(如 KissInsights 和 Hello Bar)如何工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6085022/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com