Question

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

我的托管页面无法操纵托管iFrame中的CSS以将其更改为display:block，尽管它可以操纵框架本身。托管的iFrame无法“触及”iFrame元素来操纵其 CSS以将iFrame display更改为/阻止/隐藏。

我无法看到在托管文档中有一个按钮显示iFrame和/或其内容的同时在托管中有一个按钮的方法 document能够操纵相同的元素来隐藏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", "*");

并在父项中将其作为简单字符串“command”进行适当处理。

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>

IFrame Popup“Window”，Show＆amp;隐藏，跨域

2 个答案: