public
Last active

  • Download Gist
iframe_breakout.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
<script>
 
// Break out of an iframe, if someone shoves your site
// into one of those silly top-bar URL shortener things.
//
// Passing `this` and re-aliasing as `window` ensures
// that the window object hasn't been overwritten.
//
// Example:
// var window = 'haha, punked!';
//
// Note: Probably unnecessary, but just for kicks.
 
(function(window) {
if (window.location !== window.top.location) {
window.top.location = window.location;
}
})(this);
 
</script>
iframe_breakout_no_closure.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
<script>
 
// A more cryptic one-liner, to awe & impress.
//
// No need to protect `window` since `this` is
// immutable, and at the topmost level means
// `window` anyways. Here, we compare locations
// on the left side of the "&&" and execute the
// code in parenthesis if that condition is
// true (top location isn't iframe location).
//
// Otherwise, nothing happens. It's basically an
// if statement without wrapping curly brackets.
//
// Weird, I know. But pretty cool, right? :)
 
this.top.location !== this.location && (this.top.location = this.location);
 
</script>

I felt inspired to share, after seeing Chris' snippet over at CSS Tricks...

http://css-tricks.com/snippets/javascript/break-out-of-iframe

If you want to use iFrames on your own site, you probably want to compare this.top.location.hostname instead.

this.top.location.hostname !== this.location.hostname && (this.top.location = this.location);

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.