如何检测用户已完成嵌入的 Typeform？答案

【问题标题】：How to detect user has completed embedded Typeform?如何检测用户已完成嵌入的 Typeform？
【发布时间】：2017-02-07 11:01:19
【问题描述】：

我在 iframe 内的页面中嵌入了 Typeform。从我的 JS 中，我想知道用户已经完成了 typeform（即点击了提交）。 typeform JS 似乎没有提供任何可以监听的事件。目前我只找到了以下解决方案——定期调用以下测试来检测 outro 页面是否正在显示：

document.getElementById('my-typeform-iframe').getElementsByClassName('outro').length > 0

有更好的方法吗？

【问题讨论】：

标签： javascript forms typeform

【解决方案1】：

好的，所以我上面的假设是错误的——结果是 typeform iframe 在用户提交表单时会发出一个事件。该事件被命名为form-submit 并且可以处理它，例如这样：

    window.addEventListener('message', function(event){
      if(event.data == 'form-submit')
        // your business logic here
    }, false);

【讨论】：

似乎不再起作用了...event.data 现在总是相同的 id
现在必须使用 event.data.type === "form-submit"
“form-submit”字符串属于event.data.type。

【解决方案2】：

Typeform 现在有一个“onSubmit”回调功能。

<script src="https://embed.typeform.com/embed.js"></script>
<script>
  window.addEventListener("DOMContentLoaded", function() {
    var el = document.getElementById("my-embedded-typeform");
    window.typeformEmbed.makeWidget(el, "https://admin.typeform.com/to/cVa5IG", {
    onSubmit: function() {
      alert("submited!");
    }
  });
});

这是documentation

显然没有简单的方法可以检索答案。正如@matthew 所提到的，一个 response_id 被传递给回调（我猜），您可以使用它查询 API，但您需要实现一个重试循环，因为响应不是立即可用的。

【讨论】：

如何获取表单的值？
我认为您无法在回调中立即获得它。这就是我所做的： 1. onSubmit 向服务器发送一个 xhr 2. 服务器识别提交表单的用户（通过 cookie 或请求参数） 3. 服务器使用包含 id 或的搜索查询对 typeform 进行 API 调用用户的电子邮件以获取他的回复。 4.我只在服务端处理响应数据，如果需要可以发回给客户端
我对那些遵循@apflieger 建议的人的经验是，通过 Typeform 的 API 提交后，响应不会立即可用（刚刚通过 Typeform 确认这是已知行为）。 onSubmit 回调接收到 response_id 但立即使用该 response_id 查询 Typeform 将返回一个错误长达 20 秒左右（这是我的经验）...
是的，我循环了一些重试来检索响应。但我不知道某处返回了响应 ID！