IFrame弹出"窗口",显示和隐藏,跨域

Question

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

我的托管页面无法操纵托管iFrame中的CSS以将其更改为display:block,但它可以操纵框架本身.并且托管的iFrame无法"到达"iFrame元素来操纵其 CSS以将iFrame更改display为/从块/隐藏.

我无法看到在托管文档中有一个按钮显示iFrame和/或其内容的同时,托管文档中的按钮能够操纵相同的元素来隐藏iFrame和/或它的内容.

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

另外,作为一个例外,当我从托管文档中显示iFrame本身时,整个显示被iFrame取代而不是iFrame覆盖它,主机文档仍然可以在其后面显示.

Answer 1

我能找到的唯一方法是使用跨域消息传递.

使用最初设置的框架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", "*");

并在父语句中将其作为简单的字符串"command"进行适当处理.