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

Question

I have a google form iframe. I want to hide the iframe when users click on submit button. So the main content behind it can reveal. Thanks.

<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

Answer 1

Short story: you cannot.

Iframes do not allow interaction to and from the parent page, unless they are in the same domain.

This is done by the browser for security reasons, so sadly you will have to figure a way around that, like maybe implementing a close button outside the iframe that hides it.