如何从 iframe 交叉原点内关闭 iframe
Posted
技术标签:
【中文标题】如何从 iframe 交叉原点内关闭 iframe【英文标题】：How to close iframe from within an iframe cross origin 【发布时间】：2021-08-26 03:04:34 【问题描述】：我创建了一个页面，最终用户将通过 iframe 使用该页面。 在我创建的页面内有两个按钮提交和拒绝。单击拒绝按钮时，我想关闭 iframe。我已经尝试了几种方法，但由于跨域导致权限被拒绝错误，因为我的网页将在另一台服务器上，而将通过 iframe 使用我的页面的最终用户将在不同的服务器上。
我尝试过的方法是
使用内容窗口，
window.parent
并且还尝试获取当前页面的父 url 并在同一页面重定向 window.top.href = window.top
【问题讨论】：
您无法跨域访问。几乎您唯一能做的就是使用postMessage 向父站点发送消息。然后，父级必须监听该消息，并“关闭” iframe。
【参考方案1】：
这是一个 CSS 解决方案，使用覆盖 (<nab>) z-indexed 覆盖 <iframe>、覆盖中的按钮 (<label for="dismiss">) 以及与 <label for="dismiss"> 关联的 [hidden] 复选框 (@ 987654327@)。一旦用户点击了<label for='dismiss'>，<input id='dismiss'> 就会得到:checked，这会导致包含<iframe> 的<section> 消失。
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;
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
</head>
<body>
<input id='dismiss' type='checkbox' hidden>
<section>
<nav>
<label for='dismiss'>Dismiss</label>
</nav>
<iframe src='https://example.com' scrolling='no'></iframe>
</section>
</body>
</html>【讨论】：
以上是关于如何从 iframe 交叉原点内关闭 iframe的主要内容，如果未能解决你的问题，请参考以下文章
如何在没有 iFrame 的情况下在另一个页面内显示外部网站？ [关闭]
在iframe内页面完全加载完后，关闭父页面生成的div遮罩层
laravel response() 函数未正确设置 iframe 原点
javascript - postMessage 到沙盒 iframe，为啥收件人窗口原点为空？