Question

我创建了一个页面，最终用户将通过 iframe 使用该页面。在我创建的页面内有两个按钮提交和拒绝。单击拒绝按钮后，我想关闭 iframe。我尝试了几种方法，但由于跨域而导致权限被拒绝错误，因为我的网页将在另一台服务器上，而将通过 iframe 使用我的页面的最终用户将在不同的服务器上。

我尝试的方法是

使用内容窗口，

window.parent

并且还尝试获取当前页面的父 url 并在同一页面重定向 window.top.href = window.top

Answer 1

这是一个 CSS 解决方案，它使用覆盖层 (<nab>) z-index 覆盖 <iframe>、覆盖层中的按钮 (<label for="dismiss">) 和 {{1} } 复选框与 [hidden] (<label for="dismiss">) 关联。用户点击 <input id='dismiss'> 后，<label for='dismiss'> 会得到 <input id='dismiss'>，这会导致包含 :checked 的 <section> 消失。

<iframe>

html,
body {
  overflow: hidden;
}

:checked+section {
  width: 0vw;
  height: 0vh;
  left: -999vw;
}

section {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

nav {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

label {
  display: block;
  width: 7ch;
  height: 2ch;
  position: absolute;
  top: calc(50% - 2.5ch);
  bottom: 0;
  right: 0;
  left: 50%;
  z-index: 12;
  border: 2.5px outset grey;
  border-radius: 6px;
  font: 2.5ch/1 "Segoe UI";
  text-align: center;
  background: #fff;
  cursor: pointer;
}

iframe {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

如何从 iframe 交叉原点内关闭 iframe

1 个答案: