IFrame的弹出“窗口”，显示和隐藏，跨域(IFrame Popup “Window”, Show

我有一个网页，设计成必须由多个外部网站上的被托管的弹出窗口。当用户点击托管网页的按钮，按钮应引起我的iFrame来显示。然后，用户与我iFrame'd页面交互，以完成特定的任务，最终我的页面中点击“关闭”按钮和框架再次变为隐藏。然而，由于这两个文件驻留在不同的域（而且必须这样做），我对浏览器的安全限制，运行起来。

我的主机页面无法操纵托管的iFrame内CSS将它更改为display:block ，尽管它可以使操作框架本身。和托管的iFrame不能“可达”的IFRAME元素来操纵它的CSS改变的iFrame display /从块/隐藏。

我看不到前进的方向，以具有托管文档中的按钮显示的iFrame和/或它的内容，而在托管文件中有一个按钮，同时能够操纵相同的元素隐藏的iFrame和/或它的内容。

打开任何创造性的解决方案，只要它不需要第三方JS库，因为我们没有什么可以在托管网站没有控制权，并希望尽可能少征收尽可能对他们-理想情况下，我们提供的一个小片段HTML他们在自己的网页中嵌入使用我们的互动服务。

此外，并作为的东西不谈，当我告诉从托管文档自身的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"}, "*");

注意：如果你知道网址父提前在第二个参数用它代替“*”。

此外，旧版本的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：