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

Question

我正在开发一个模式/弹出系统，供用户嵌入他们的网站，类似于 KissInsights 和 Hello Bar （示例此处和此处）即可。

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

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

。TIA

Answer 1

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

1. 嵌入脚本

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

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

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

但是，您需要考虑一些事情：

• 您不能使用任何库（或者如果使用，请非常小心您使用的库）：这些库可能与页面上已有的内容发生冲突，并破坏客户的网站。你不想那样做。
• 切勿覆盖任何内容，因为覆盖可能会破坏客户的站点：这包括事件侦听器、本机对象属性等。例如，始终将 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

Answer 2

您可以查看此处 - 这是使用我的 JsApiToolkit，一个允许服务提供商轻松创建类似 Facebook Connect 的工具并将其分发给第三方的框架网站。

该库构建于用于跨域消息传递的 easyXDM 之上，并通过模式对话框或弹出窗口促进交互。

代码和自述文件应该足以解释事物如何组合在一起（一旦您抽象出 XDM 之类的东西，它实际上并不太复杂）。

关于嵌入本身；您可以直接执行此操作，但大多数服务使用“引导”脚本，可以轻松更新以指向真实文件 - 这个小文件可以使用缓存编译指示来提供服务，以确保它不会缓存太长时间，而注入的文件可以作为长期存在的文件。

这样，您只会产生重新下载引导程序的开销，而不是整个脚本集的开销。

Answer 3

最佳实践是在代码片段中放入尽可能少的代码，这样您就不必要求用户更新他们的代码。例如：

<script type="text/javascript" src="http://your.site.com/somecode.js"></script>

如果作者将其嵌入到他们的页面中，则效果很好。否则，如果您需要小书签，您可以使用此代码在任何页面上加载脚本：

  javascript:(function(){
    var e=document.createElement('script');
    e.setAttribute('language','javascript');
    e.setAttribute('src','http://your.site.com/somecode.js');
    document.head.appendChild(e);
  })();

现在您的所有代码都将位于上面引用的 URI 中，并且每当加载其页面时，都会下载代码的新副本并被执行。 （不考虑缓存设置）

在该脚本中，只需确保不会破坏名称空间，并在加载另一个库之前检查库是否存在。如果您正在使用安全的 jQuery 对象而不是 $ 。如果您想加载更多外部内容（例如 jQuery、UI 内容等），请使用 onload 处理程序来检测它们何时完全加载。例如：

function jsLoad(loc, callback){
  var e=document.createElement('script');
  e.setAttribute('language','javascript');
  e.setAttribute('src',loc);
  if (callback) e.onload = callback;
  document.head.appendChild(e);
}

那么你可以简单地调用这个函数来加载任何js文件，并执行回调函数。

jsLoad('http://link.to/some.js', function(){
  // do some stuff
});

现在，与域通信以检索数据的一种棘手方法是使用 javascript 作为传输。例如：

jsLoad('http://link.to/someother.js?data=xy&callback=getSome', function(){
  var yourData = getSome();
});

您的服务器必须动态处理该路由，并返回一些具有“getSome”函数的 javascript，该函数可以执行您想要的操作。例如：

function getSome(){
  return {'some':'data','more':'data'};
}

这将非常有效地允许您与服务器通信并从服务器可以获得的任何地方处理数据。

Answer 4

您可以从您的服务器提供动态生成的（例如使用 PHP 或 Ruby on Rails）在每个请求上生成此文件）JS 文件，该文件是从客户网站导入的，如下所示：

<script type="text/javascript" src="//www.yourserver.com/dynamic.js"></script>

然后您需要为您的客户提供一种方法决定他们希望模式/弹出窗口包含什么内容（例如文本、图形、链接等）。您可以创建一个简单的 CMS，也可以为每个客户手动执行。

你的服务器可以看到每个 JS 文件的请求来自哪里，并据此提供不同的 JS 代码。例如，JS 代码可以将 HTML 代码插入到您的客户网站中，在顶部创建一个包含一些文本和链接的栏。

如果您想访问客户访问者信息，您可能需要从 HTML 代码中读取该信息，让您的客户以特定方式提供您想要的信息，或者找出从每个客户的 Web 服务器访问该信息的不同方式。