【问题标题】:single HTML5 form on multiple websites多个网站上的单个 HTML5 表单
【发布时间】:2017-05-18 16:58:12
【问题描述】:

有哪些技术可用于创建可插入多个网站并将表单数据发送到单个后端服务的 Web 表单(例如调查表)? 后端需要识别它接收数据的网站/前端。

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

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

【问题讨论】:

  • 网站是否托管在同一台服务器上?
  • 网站都在不同的服务器上。

标签: javascript php html iframe


【解决方案1】:

iframe 是唯一实用的选择。其他任何事情都会导致表单的 HTML 受到来自托管站点的 CSS 和 JS 的影响(这可能不会被设计为与表单交互,因此会产生计划外和不希望的副作用)

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

【讨论】:

  • 如果我制作 iframe,在服务器端识别网站的最佳方法是什么?我是否必须在客户端存储某种证书/令牌?
  • @EmilS.Jørgensen 我希望后端识别表单数据是从哪些网站发送的。这些网站位于不同的服务器上
【解决方案2】:

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

现在,可能会出现的其他问题是,当客户端使用 CSS 或某些第三方库将一些基本样式应用到他们的应用程序时。这可以通过提供描述性的类名称并在必要时标记它们 !important 来避免。

例如:给你的 Text Inputs 一个名为 input 的类很容易被第三方库设置样式。最好将它们命名为input_for_my_custom_form,是的,这是一个冗长的过度;但它确实有效。

希望对你有所帮助!

更新:

为了识别从哪个网站触发服务,可以很容易地使用 javascript/jQuery 获取当前客户端应用程序的 URL,并将其作为额外参数发送到您的表单请求中。

【讨论】:

    【解决方案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,或插入点击打开整个页面的图像。这些只是我脑海中的选项。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2014-08-13
      • 1970-01-01
      • 2012-03-20
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多