logo标签列表

我的表单提交被阻止了，因为框架被沙盒化了，并且没有设置 'allow-forms' 权限。

javascripthubspot
23

我正在尝试为Hubspot构建自定义表单和提交请求。

我有以下代码

HTML

<head>
<script src="prezzi-form-submit.js"></script>
</head>
<body>

  <form class='form-inline' id='my-custom-form'>
    <div class="form-group">
      <input type='email' class='form-control' placeholder='Your email address' required>
    </div>
    <button class="btn btn-primary" type='submit'>Sign up</button>
  </form>

  <!-- Actual form that gets submitted to HubSpot -->
  <div class="hidden" id='hubspot-form'>
    <script charset="utf-8" src="//js.hsforms.net/forms/current.js"></script>
    <script>
      hbspt.forms.create({
        portalId: 'my-portal-id',
        formId: '92b9b82a-0da2-4e23-8a30-04541c05ce6d',
        onFormReady: function($form) {
          $form.attr('target', 'hubspot-iframe');
        }
      });
    </script>

    <!-- iFrame that data will get submitted to. This hack stops the page redirect. -->
    <iframe name="hubspot-iframe" id="hubspot-iframe" sandbox="allow-forms"></iframe>
  </div>
</body>

JS (prezzi-form-submit.js)

// // Send form data to HubSpot from the client.
function submitToHubSpot(data) {
  var $form = $('#hubspot-form form'),
      k;

  // Loop through each value and find a matching input.
  // NOTE: Doesn't support checkbox/radio.
  for (k in data) {
    $form.find("input[name='" + k + "']").val(data[k]);
  }

  $("form input:submit").trigger("click");
}

// Here's how you'd use this.
$('#my-custom-form').on('submit', function() {
  var formData = {};
  $(this).serializeArray().forEach(function(data) {
    formData[data.name] = data.value;
  });

  submitToHubSpot(formData);

  // We sent the data. Now do whatever else you want.
  alert('Gee, thanks Jonathan! Now I can focus on onboarding my customers with Appcues!');
  window.location.href = 'http://appcues.com';
})

当我按下提交按钮时，控制台会显示以下错误：
阻止了对“”的表单提交，因为表单的框架被沙盒化，而“allow-forms”权限未设置。
正如您所看到的，我在I Frame中设置了sandbox =“allow-forms”，但它没有起作用。 如何修复此错误？
没有足够的元素来给出一个确定的解决方案，但我觉得服务器的响应很差。可能是Javascript在HTTP OPTIONS方法中进行了预检查调用，以查看是否真的可以调用表单操作，但服务器响应了一个不允许表单提交的“Access-Control-Allow-Origin”头。我建议您检查浏览器中的网络选项卡，并查看发送到服务器和相关响应的请求。 - 500 Server error
我之前在我们本地运行的其他应用程序中看到了类似的行为（不是在Hubspot中）。我不确定这是否是浏览器的更改，因为它发生在没有源代码更改的情况下。奇怪的是，它在Chrome、Edge和Firefox上都出现了。 - Will Young
3个回答
52
有时候当你从一个应用程序点击链接时，新打开的标签页会禁用/沙盒化 JavaScript。
关闭这个标签页并在新的标签页中重新打开相同的 URL，可能会起作用。
1
嗯，不错。谢谢！ - tylerlindell
奇怪的是，那个有效了。谢谢。 - Fijjit
2
遇到了在Hubspot上的iFrame表单相同的问题，并收到了相同的JS错误。发现这与使用HS Design工具的实时预览有关。
在顶部的下拉菜单中，有“带显示选项的实时预览”，然后是“不带显示选项的预览”。选择“带显示选项的预览”会使其“隔离”，请尝试选择不带显示选项的那个。希望对某人有所帮助。最初的回答。
0

不要在HTML中设置allow-form属性，而是在.js文件中使用它

el.setAttribute('sandbox', 'allow-forms');

这是因为框架本身被沙盒化了，但脚本在表单提交之前被调用，触发了框架的提交，但由于用户无法提交，它不会调用iframe属性以遵守设置的属性。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接