如何在用户点击提交按钮时隐藏Google Form iframe表单

受浏览器跨域安全策略限制，你无法直接访问Google表单iframe内部的DOM元素监听提交按钮点击事件，我们可以通过监听iframe的加载状态变化实现需求：用户提交表单后Google表单会自动加载提交成功页面，此时会触发iframe的load事件，我们监听该事件后隐藏外层容器即可。

完整实现代码 #

HTML部分 #

<h1>this is hidden content</h1>
<p>What is Lorem Ipsum?
Lorem Ipsum is simply dummy</p>
<div class="login">
<iframe id="google-form-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>

CSS部分 #

在原有CSS基础上新增隐藏类即可：

.login {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: white;
}
/* 新增隐藏类 */
.login.hidden {
    display: none;
}

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

JavaScript部分 #

const formIframe = document.getElementById('google-form-iframe');
let loadCount = 0;
// 第一次加载是表单本身，第二次加载是提交成功页面
formIframe.addEventListener('load', () => {
  loadCount++;
  if (loadCount >= 2) {
    document.querySelector('.login').classList.add('hidden');
  }
});

内容的提问来源于stack exchange，提问作者Tianxuan Liu