JS 关闭 iframe 本身内的 iframe，如 Stripe 的嵌入式表单（CROSS BROWSER）答案

【问题标题】：JS close an iframe within the iframe itself, like Stripe's embedded form (CROSS BROWSER)JS 关闭 iframe 本身内的 iframe，如 Stripe 的嵌入式表单（CROSS BROWSER）
【发布时间】：2016-06-16 00:22:53
【问题描述】：

我正在构建一个嵌入式表单，类似于 Stripe 的。

这里是演示代码。

<form action="/charge" method="POST">
  <script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="pk_test_6pRNASCoBOKtIshFeQd4XMUh"
    data-amount="2000"
    data-name="Stripe.com"
    data-description="2 widgets"
    data-image="/img/documentation/checkout/marketplace.png"
    data-locale="auto">
  </script>
</form>

<h5>This button still works after close iframe within iframe.</h5>
<button onclick="alert('hi');">Alert</button>

https://jsfiddle.net/sq5zs5rq/3/

我想了解一下，Stripe 的“关闭模式”(X) 按钮如何才能真正关闭整个 iframe，而剩下的网页仍然有效。

我已经解决了这个问题，但它无法跨浏览器工作。 Close iframe cross domain

我也尝试过制作 iframe 正文（display:none），但是除非刷新页面，否则整个网站都无法正常工作。

有人可以解释或提供解决方案吗？

【问题讨论】：

标签： javascript jquery iframe

【解决方案1】：

您可以使用postMessage API 在 iframe 窗口和父窗口之间进行通信。

这是可行的，因为您可以在两个窗口中控制代码

【讨论】：

我正在查看 postMessageAPI 文档。感谢您的参考。
现在，我卡在这里了。 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('http://0.0.0.0:8888') does not match the recipient window's origin ('http://0.0.0.0:8000').