I hit a JavaScript issue recently that stumped me. I’m trying to detect if the code I’m running is in an IFrame or not. It seems like the safest way to determine this would be the following comparison:
if(window !== top) {
var mode = "frame";
}
‘window’ of course is the global object in which your code is running. If you’re running in a frame, your window object is actually a child in a window hierarchy. ‘top’ refers the to the top-most window in the hierarchy. Therefore if window and top are the same, then you are in a top level page; conversely if they are different, then you are in a frame (or iframe).
This works great on Firefox but on IE, the window !== top expression never evaluates to true. That is, even if you’re the top window, ‘top’ and ‘window’ aren’t considered equal. I’m not sure why this is. My current fallback code is this:
try {
   if (top.location.href !== window.location.href) {
var mode = "frame";
}
} catch (e) {Â Â Â Â
// if you're in an iframe in a different domain, the top.location check
// results in a security exception
mode = "frame";
}
This code has two problems:
- There’s a small possibility that you could have the a frame with the same URL as the outer page. This is very unlikely because there’s no scenario I know of where you want to nest a page, but it’s still a latent bug.
- You have to deal with the exception in the cross domain case. Not a big deal but unclean.
I’m curious if anyone has a better solution for detecting whether or not you’re in an IFrame.
If you use the equality operator (!=) rather than identity operator (!==), then it works in IE.
I used another tick:
In my window I set an arbitrary variable and then check if the variable is defined in the parent window, if that is the case you are not in an iframe.
var runningInAnIframe = function(){
var windowMode = ‘iframe’;
window.displaymode = windowMode;
//detect if we are in a iframe
if(window.parent.displaymode !== undefined && window.parent.displaymode === windowMode){
return false;
}
return true;
}
simple and effective.