There are a number of techniques out there for cross-domain iframe hiding using URL fragments or proxy iframes.  I’m presenting a technique that has worked well for hiding iframes that host 3rd party ad content but where occasionally there is no ad content to display.  Specifically, it works even when you may have the same ad slot hosted on multiple sub-domains on your site.  its necessary since the 3rd party ad content is served from an ad network such as Doubleclick.

Of course, its preferable to fill empty ad slots; but this has worked in a pinch where we simply did not have sufficient ad content and we preferred not to display an internal ad.  We wanted the entire slot to disappear.

Not serving ads in iframes obviously avoids this entire problem, but we’ve preferred to sandbox 3rd party ads in iframes to prevent issues; we’ve found defects with ads especially when the same ad content could appear in more than one slot on the same page – where those ads jacked up the entire page display.  Iframes are also naturally asynchronous, but of course there are Javascript techniques to gain this same feature.

Pre-conditions of this solution

* You are an Ad publisher who can control the “creative” that is returned by the ad network in the scenario where there is no real ad to display.

* You can host an HTML file on your site which helps the iframe creative to “bust out” and hide itself; that resource is accessible from the same path on each sub-domain of your site.

How it works

We’re exploting the fact that an iframe’s referrer URL is the URL of the containing page.  The iframe can find the sub-domain of the parent page, then request and execute some Javascript from a resource on a known path on the sub-domain.  This Javascript will run in the “security context” of the sub-domain.  This Javascript code can then do whatever it wants, in our case hiding the parent element of the iframe.

Steps

Provide the special creative that should be served when there is no ad content.  Have your ad operations people schedule this:

<script type="text/javascript">
  if (window != top) {
    var referrerMatch = document.referrer.match(/[A-Za-z]+:\/\/[A-Za-z0-9.-]+(:[0-9]+)?/);
    if (referrerMatch != null) {
      location.replace(referrerMatch[0] + '/iframe-hide.html');
    }
  }
</script>

Create the iframe-hiding helper /iframe-hide.html, making sure its accessible off every sub-domain on which the ad slot might be located:

<script type="text/javascript">
<!--
try {
  var iframes = parent.document.getElementsByTagName('iframe');
  for (var i=0; i < iframes.length; i++) {
    if (document == iframes[i].contentDocument || self == iframes[i].contentWindow) {
      iframes[i].parentNode.style.display = 'none';
      break;
    }
  }
} catch (e) { }
-->
</script>

That’s pretty much it.

When the special creative is served it locates the /iframe-hide.html resource off the enclosing page’s sub-domain and it executes, hiding the parent node of the iframe.

Conclusion

We’ve had this solution in place for over a year; it works for the scenarios outlined above.  However, this technique is not totally transparent to the end user as it requires an extra round-trip to occur before the iframe is hidden.  It can cause obvious shifts in the page content for above-the-fold ad slots, especially ones that occupy a significant horizontal position.  For less obvious ad slots, especially those below-the-fold, the user may be oblivious.