我有一个网页,设计为一个必须由许多外部网站托管的弹出窗口。当用户单击托管网页中的按钮时,该按钮应使我的 iFrame 显示。然后用户与我的 iFrame 页面交互以完成特定任务,并最终单击我页面中的“关闭”按钮,框架再次隐藏。但是,因为这两个文档驻留在不同的域中(并且必须这样做),所以我遇到了浏览器安全限制。
我的托管页面无法在托管的 iFrame 中操纵 CSS 以将其更改为 display:block
,尽管它可以操纵框架本身。并且托管的 iFrame 无法“到达”iFrame 元素以操纵它的 CSS 来将 iFrame display
更改为/从 block/hide。
我看不到在 hosting 文档中有一个按钮显示 iFrame 和/或其内容,同时在 hosted 中有一个按钮的方法em> 文档能够操纵相同的元素来隐藏 iFrame 和/或其内容。
只要不需要第三方 JS 库,就可以接受任何创造性的解决方案,因为我们几乎无法控制托管网站,并希望尽可能少地强加于他们 - 理想情况下,我们提供一小段 HTML,他们将其嵌入到他们的页面中以使用我们的交互式服务。
此外,顺便说一下,当我从托管文档中显示 iFrame 本身时,整个显示都被 iFrame 取代,而不是 iFrame 覆盖它,托管文档在它后面仍然可见。
最佳答案
我能找到的唯一方法是使用 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", "*");
并在父级中将其作为简单的字符串“命令”进行适当处理。
关于javascript - IFrame Popup "Window",显示和隐藏,跨域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17798618/