用户单击提交按钮时如何隐藏 iframe 表单答案

【问题标题】：How to hide a iframe form when users click on submit button用户单击提交按钮时如何隐藏 iframe 表单
【发布时间】：2021-08-12 05:10:55
【问题描述】：

我有一个谷歌表单 iframe。当用户单击提交按钮时，我想隐藏 iframe。所以它背后的主要内容可以揭示。谢谢。

<h1>this is hidden content</h1>
<p>What is Lorem Ipsum?
Lorem Ipsum is simply dummy</p>
<div class="login">
<iframe name="target-iframe" src="https://docs.google.com/forms/d/e/1FAIpQLSc6XXOdWSJoHbfdUMRyOsVhap5r7-nR5nhdyWgZyOavYFz9bw/viewform?embedded=true" width="100%" height="100%" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
</div>

/* Add display:none to login class to hide the form */

.login {
    position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
    background-color: white;
}

iframe {
  display: block;
  max-width: 100%;
  margin: auto;
  height: 100vh;
  z-index: 2;
}

https://codepen.io/TianxuanL/pen/mdWmbBK

【问题讨论】：

可能对你有帮助：https://stackoverflow.com/questions/13439303/detect-click-event-inside-iframe

标签： javascript iframe form-submit google-forms

【解决方案1】：

小故事：你不能。

iframe 不允许与父页面进行交互，除非它们在同一个域中。

出于安全原因，这是由浏览器完成的，所以遗憾的是，您必须想办法解决这个问题，比如在 iframe 之外实现一个关闭按钮来隐藏它。

【讨论】：