{"id":110,"date":"2009-04-09T05:20:45","date_gmt":"2009-04-09T13:20:45","guid":{"rendered":"https:\/\/billhiggins.us\/weblog\/?p=110"},"modified":"2009-04-09T05:20:45","modified_gmt":"2009-04-09T13:20:45","slug":"detecting-that-youre-in-an-iframe","status":"publish","type":"post","link":"https:\/\/billhiggins.us\/blog\/2009\/04\/09\/detecting-that-youre-in-an-iframe\/","title":{"rendered":"detecting that you're in an IFrame"},"content":{"rendered":"

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:<\/p>\n

if(window !== top) {\n   var mode = \"frame\";\n}<\/pre>\n
‘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).<\/p>\n
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:<\/p>\n
try {\n\u00c2\u00a0\u00c2\u00a0\u00c2\u00a0 if (top.location.href !== window.location.href) {\n        var mode = \"frame\";\n    }\n} catch (e) {\u00c2\u00a0\u00c2\u00a0\u00c2\u00a0\u00c2\u00a0\n    \/\/ if you're in an iframe in a different domain, the top.location check\n    \/\/ results in a security exception\n    mode = \"frame\";\n}<\/pre>\n
This code has two problems:<\/p>\n
    \n
  1. 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.<\/li>\n
  2. You have to deal with the exception in the cross domain case. Not a big deal but unclean.<\/li>\n<\/ol>\n
    I’m curious if anyone has a better solution for detecting whether or not you’re in an IFrame.<\/p>\n","protected":false},"excerpt":{"rendered":"
    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 […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-110","post","type-post","status-publish","format-standard","hentry","category-ajax"],"_links":{"self":[{"href":"https:\/\/billhiggins.us\/blog\/wp-json\/wp\/v2\/posts\/110","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/billhiggins.us\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/billhiggins.us\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/billhiggins.us\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/billhiggins.us\/blog\/wp-json\/wp\/v2\/comments?post=110"}],"version-history":[{"count":0,"href":"https:\/\/billhiggins.us\/blog\/wp-json\/wp\/v2\/posts\/110\/revisions"}],"wp:attachment":[{"href":"https:\/\/billhiggins.us\/blog\/wp-json\/wp\/v2\/media?parent=110"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/billhiggins.us\/blog\/wp-json\/wp\/v2\/categories?post=110"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/billhiggins.us\/blog\/wp-json\/wp\/v2\/tags?post=110"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}