Iframe Popup "window", Show & Hide, Cross Domain

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

Solution 1:

The only way I could find to do this is using Cross Domain Messaging.

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>

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

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

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

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

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

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

Solution 2:

Very inefficient, but it works.

On the iframe page, add <a href="#" onclick="window.top.location.hash='close'">Close</a>

And on the page that has the iframe on it add

Javascript:

setInterval(function(){check()},1);
functioncheck() {
if(window.location.hash=='#close') {
document.getElementById('frame').style.display='none';
}
}

HTML:

<iframe id="frame" src=""></iframe>