javascript - IFrame Popup "Window"，显示和隐藏，跨域

Question

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

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

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

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

此外，顺便说一下，当我从托管文档中显示 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", "*");

并在父级中将其作为简单的字符串“命令”进行适当处理。