1

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

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

我看不到让托管文档中的按钮显示 iFrame 和/或其内容的方法，同时让托管文档中的按钮能够操作相同的元素以隐藏 iFrame 和/或它的内容。

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

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

4

2 回答 2

6

我能找到的唯一方法是使用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", "*");

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

于 2013-07-23T02:17:14.410 回答
-1

非常低效，但它确实有效。

在 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>
于 2013-07-22T22:56:05.210 回答