I started building websites in around 1997. The web was a fun tool to play with, but we were all learning and not really thinking about the consequences of what we were doing. Frames were used across the board- it was a convenient way of showing multiple pages and content on one page. From around 2003 frames started to be frowned upon. They were bad for SEO (search engines would spider each frame separately), bad for accessibility and just, well, bad. CSS had started to become much more popular and supported by the major browsers and so it became easier to place content on the page in a similar way to what frames offered.
It’s 2012, so you’d have thought frames had long gone. But no- they’re back and I’m starting to see them popping up everywhere. It’s frustrating because you can spend so much time on making your website look beautiful and then someone frames it in another page- all that work down the drain. StumbleUpon and Visibili are the most notable culprits here.
How to break out of a frame
I’m not saying anything new here. This method has been around for more than 15 years! However, since frames are becoming more common, I think it’s time for a refresher. It is really easy to do, but I’d like to spend a bit of time explaining how it works. If you’d rather not know, just scroll down to the bottom of this article…
Top O’ The Mornin’ to ya…
There is another property called “self” which can tell us the location of the current window in the browser. So by asking if top equals self we can find out whether we’re framed or not:
alert("Agggh, I\’ve been framed!")
alert("Ah, I feel as free as a bird…")
Here is the finished script:
if (top.location != self.location)
top.location = self.location;