IFrame Popup“Window”，Show&隐藏，跨域

问题描述：

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

I have a web page, designed as a popup window that must be hosted by many external web sites. When the user clicks on a button in the hosting web page, the button should cause my iFrame to display. The user then interacts with my iFrame'd page to complete a specific task and eventually clicks the "close" button within my page and the frame becomes hidden again. However, because the two documents reside in different domains (and must do so), I am running up against browser security restrictions.

我的托管页面无法在托管的iFrame中操作CSS，将其更改为 display：block 可以如此操纵框架本身。并且托管的iFrame不能达到iFrame元素来操纵其 CSS以将iFrame 显示改为/从块/隐藏。

My hosting page can't manipulate CSS within the hosted iFrame to change it to display:block, though it can so manipulate the frame itself. And the hosted iFrame can't "reach up" to the iFrame element to manipulate its CSS to change the iFrame display to/from block/hide.

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

I can't see a way forward to having a button in the hosting document show the iFrame and/or its contents while at the same time having a button in the hosted document be able to manipulate the same element to hide the iFrame and/or its contents.

打开到任何创造性的解决方案，只要它不需要第三方JS库，因为我们很少或没有控制的托管网站，并希望尽可能少地强加于他们 - 理想情况下，我们提供一小段HTML代码，并将它们嵌入页面以使用我们的互动服务。

Open to any creative solutions as long as it doesn't require a third-party JS library, since we have little to no control over the hosting sites and want to impose as little as possible on them - ideally, we supply a tiny snippet of HTML which they embed in their page to use our interactive service.

此外，当我从iFrame本身显示

Also, and as something of an aside, when I show the iFrame itself from the hosting document, the entire display is replaced by the iFrame instead of the iFrame overlaying it with the hosting document still visible behind it.

答

最初样式为 code>，并且托管页 onclick 处理程序设置 display：block ，将此JavaScript添加到托管页：

With the frame initially styled display:none, and the hosting page onclick handler setting display:block, add this JavaScript to the hosting page:

<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中，只要在关闭（隐藏）框架时执行此操作： / p>

and in the hosted iFrame, just do this when you want to close (hide) the frame:

parent.postMessage({name:"Close"}, "*");

注意：如果您提前知道父级的URL，请使用它而不是*第二个参数。

Note: If you know the URL for the parent ahead of time use it instead of "*" in the second argument.

此外，旧版本的IE（8和更早版本，IIRC）不能处理一个对象参数，所以你需要使用：

Also, older versions of IE (8 and earlier, IIRC) cannot handle an object parameter, so for those you need to use:

parent.postMessage("Close", "*");

并在父级中作为简单字符串command适当处理。

and handle it appropriately in the parent as a simple string "command".

IFrame Popup“Window”，Show&隐藏，跨域

相关推荐