IFrame 弹出“窗口”、显示和隐藏、跨域

Question

我有一个网页，设计为必须由许多外部网站托管的弹出窗口。当用户单击托管网页中的按钮时，该按钮应该会显示我的 iFrame。然后，用户与我的 iFrame 页面交互以完成特定任务，并最终单击我页面中的“关闭”按钮，框架再次隐藏。但是，因为这两个文档位于不同的域中（并且必须这样做），所以我遇到了浏览器安全限制。

我的托管页面无法操纵托管 iFrame 中的 CSS 以将其更改为 display:block，尽管它可以操纵框架本身。并且托管的 iFrame 无法“到达” iFrame 元素以操纵 其 CSS 以将 iFrame display 更改为/从块/隐藏。

我看不到如何让 hosting 文档中的按钮显示 iFrame 和/或其内容，同时在 hosting 中拥有一个按钮 em> 文档能够操作相同的元素来隐藏 iFrame 和/或其内容。

欢迎任何创意解决方案，只要它不需要第三方 JS 库，因为我们几乎无法控制托管网站，并且希望尽可能少地强加于他们 - 理想情况下，我们提供一个很小的 ​​HTML sn-p，他们将其嵌入到他们的页面中以使用我们的交互式服务。

另外，顺便说一句，当我从托管文档中显示 iFrame 本身时，整个显示将被 iFrame 替换，而不是 iFrame 覆盖它，而托管文档在其后面仍然可见。

Answer 1

我能找到的唯一方法是使用Cross Domain Messaging。

框架初始样式为display:none，托管页面onclick处理程序设置display:block，将此JavaScript添加到托管页面：

<script>
  window.onmessage=function(msg) {
      var fra=document.getElementById("~~frame-id-here~~");
      if(msg.data && msg.data.name=="Close" && msg.source==fra.contentWindow) {
          fra.style.display="none";
          }
      };
</script>

在托管的 iFrame 中，只需在您想要关闭（隐藏）框架时执行此操作：

parent.postMessage({name:"Close"}, "*");

注意：如果您提前知道父级的 URL，请在第二个参数中使用它而不是“*”。

此外，旧版本的 IE（8 及更早版本，IIRC）无法处理对象参数，因此对于您需要使用的那些：

parent.postMessage("Close", "*");

并在父级中适当地处理它作为一个简单的字符串“命令”。

Answer 2

非常低效，但确实有效。

在iframe页面，添加<a href="#" onclick="window.top.location.hash='close'">Close</a>

然后在有 iframe 的页面上添加

Javascript：

setInterval(function(){check()},1);
function check() {
if(window.location.hash=='#close') {
document.getElementById('frame').style.display='none';
}
}

HTML：

<iframe id="frame" src=""></iframe>