So, when I need to call my mom, it’s usually never because I need to make myself disappear. Yet, that’s exactly the situation I found myself in the other day. Well, maybe not exactly. We needed a “splash page” for a client that was going to be the same on a number of their sites. It also needed to be easy to update. I usually hate to use an iframe, but, if there was ever a case for one, this would be it. We could host a single page all by itself, and then pop that bad boy over any homepage we wanted.

Here’s the problem, though: we have to close the iframe. We wanted a full page, not a popup with a little X in the corner. Call to actions and links inside the iframe were required, so telling javascript to hide the iframe on click wasn’t an option. In short, we needed a “return to home page” button inside the iframe and a way for the iframe to talk to its parent.

The Situation

1. Click a button in the iframe
2. The iframe sends a message to the parent window
3. The javascript in the parent receives the message and then hides the iframe

The iFrame Close Button

This is where we use the awesome “window.postMessage()” method. “This method safely enables cross-origin communication between Window.” In other words, it lets your iframe talk to its mom, child window to parent window.

In the iframe, I just used a simple inline “onclick” link.

<a href="#" 
  onclick="parent.postMessage('closed', '*');" 
  class="close-button"
  >
    Take Me to the Home Page
</a>

Let us take this apart a little. The “parent.” is the window we want to find (aka mom, or the main browser window that the iframe is in). The first argument “closed” is the message we want to send the parent window. It can be any text that makes sense to the situation. The second argument “*” is the URL of the window that the method should expect to be interacting with. In my case, I want this to work with any URL because we will be using the same code on multiple sites, so I used a wild card. Apparently wild cards work here.

Receive the Message

Now we need to get mom to pick up the phone. In the sites that are going to have the iframe in it, we need to put a little bit of javascript.

window.onmessage = function (event) {
  if (event.data === "closed") {
    closeIFrame();
  }
};

Then “window.onmessage” reacts whenever the main window gets a message. We get the message with “event.data” and check to see if it’s the one we sent. Then we run a function “closeIFrame()” which of course we have to write.

Do Something with the Message

Now poor mom has to go pick you up, send you some money, watch your dog, or whatever it is you usually call your mom about. Most noteworthy, my IRL mom is actually watching my IRL dog this weekend and I didn’t have to send her a URL at all. Just FYI.

You can do this however you like of course. These particular sites were already running jQuery so I went the easy route.

// Close the iframe
function closeIFrame() {
  // Lets totally remove it from the DOM
  $('.splash-page').remove();
  // We don't want to be at the BOTTOM of the homepage when the iframe goes away
  window.scrollTo(0, 0);
  // And you can do whatever else needs to be done, like cookie setting so that the screen doesn't keep poping up for returning users.
}

We just removed the iframe and scrolled the main window back to the top.

I hope this helps someone out there in the same situation. Unfortunately, you DO have to have control over the iframe code and the parent code, so this won’t help you with a Facebook plugin, for example.