多个网站上的单个HTML5表单

Question

可以使用哪些技术来创建可以插入多个网站并将表单数据发送到单个后端服务的Web表单（例如调查表单）？ 后端需要识别哪个网站/前端接收数据。

像Facebook评论插件一样插入多个网站。 但是，我希望该插件足够灵活，以便我可以轻松地将插件集成到许多不同的网站，作为添加页面的链接。

iframe是唯一的选择还是还有其他更好的选择？

Answer 1

iframe是唯一可行的选择。任何其他东西都会导致表单的HTML受托管站点的CSS和JS（可能不会被设计为与表单交互，因此会出现意外和不需要的副作用）

唯一的另一种方法是使用一个与iframe基本相同的对象，但不太清楚。

Answer 2

也可以通过公开一个width文件来实现，该文件将托管在您的服务器上，并负责在客户端页面上动态创建表单。现在，通过这样做，您不必担心代码更新。由于只要您提供新版本的代码，代码就会托管在您的服务器上，所以客户端的表单将再次更新。

现在，可能发生的其他问题是客户端将使用CSS或某些第三方库将一些基本样式应用于其应用程序。这可以通过提供描述性的类名并在必要时将其标记为 Javascript 来避免。

例如：为 !important 提供一个名为Text Inputs的类，很容易被第三方图书馆设计。更好地命名他们input，是的，这是一个漫长的过度做法;但它确实可以解决问题。

希望它能帮到你！

更新

为了识别服务被触发的网站，可以使用javascript / jQuery轻松实现获取当前客户端应用程序的URL，并将其作为表单请求的附加参数发送。

Answer 3

第一个问题 - 技术是什么？

• 表单可以在服务器端生成。服务器可以使用HTTP Referer标头区分它所属的站点/页面。这样您还可以根据目标页面应用一些细节。
• 表单可以在客户端生成，例如使用JavaScript。 - 您为网站提供了一小段JavaScript，以包含在目标页面中。该脚本用作从CDN（您的服务器 - 内容分发网络）加载其他JavaScript的引导程序。下载的JavaScript呈现表单。

我认为使用JavaScript的客户端代是最受欢迎的。一种常见的方法是压缩引导程序JavaScript。

第二个问题 - 如何识别目标页面（表单的提交页面）。

在您提供给目标网页/网站的链接/代码中，您嵌入了一个标识该网页的ID。提交表单时，ID随之提交，因此您的后端服务知道哪个是源。或者，您可以使用页面ID设置cookie（现在不太流行）。也可以使用HTTP Referer标头。

引导程序JavaScript可以访问当前的浏览器URL，并可以将其发送到后端服务。

第三个问题 - iframe是唯一的选择吗？

iframe 是最受欢迎的选择，因为它在目标网站和插件之间提供了良好的隔离。它还继承了后端服务的安全性。 Javascript安全区域可能不允许您的脚本在目标页面的上下文中运行，而它将在iframe中运行，因为iframe的原点和JavaScript是相同的。

但是，您可以考虑在目标网页中呈现纯HTML，或者插入点击后打开整页的图片。这些只是我头脑中的选择。