How to Break Out of Frames Using Javascript

If you had asked me 10 years ago whether websites would still be placing other websites in frames today, I would have said “No!” emphatically.

Unfortunately, there are still many services and websites that put ugly bars and headers at the top of your website. Yes….YOUR WEBSITE!!!

No one has the right to change the way you display content on your website.

The practice is quite common among certain Twitter users. For example, I see many people using the service SharedBy so that they can track sharing stats.

Users may also display affiliate links in the top bar. That means that other internet users are displaying an affiliate link in a very prominent position at the top of your website. It’s tantamount to stealing.

SharedBy
Some sharing bars display affiliate links that earn money for the person that shared the page.

Another website that I have come across that does this is BlogLovin. The service will display a huge header at the top of your articles that is around 310 pixels high.

The header displays sign up buttons to allow people to sign up to BlogLovin via Facebook or via email. Their logo is displayed prominently in the header too; which may make many people believe the content is actually published on BlogLovin.

Underneath the top header is a sharing bar that displays sharing buttons for Pinterest, Facebook, Twitter, and email. If someone shares the page using these buttons, others are sent to the page with the BlogLovin header displayed at the top.

BlogLovin
BlogLovin displays a massive header at the top of pages.

Such a large header is intrusive to visitors and infuriating for website owners. It pushes many important things below the fold and places navigation, the website logo, and banners, at the bottom of the page rather than at the top. Additionally, people are more likely to click away from your website because of the header.

A horrible secondary vertical scrolling bar is displayed because they have placed your content in a frame (a.k.a. an iframe). There is not even an option to close this annoying header.

Whether you like it or not, external websites such as BlogLovin can place your websites in frames. I found my blog had already been added to their service. Their ugly banner displays if I stop my website breaking out of frames.

BlogLovin on KevinMuldoon
External websites may place your content in frames whether you like it or not.

We all need to be taking steps to tackle websites like that so that they cannot reduce our traffic and affect our income. Let’s take a look at how we do this.

How to Stop Someone Placing Your Website in a Frame

I have a zero tolerance for people who try and mess around with how I want my website to be displayed. Therefore, I make a point of trying to stop anyone from displaying frames on my website.

This can be done easily using a little Javascript. To ensure your website breaks out of frames, simply add the following code to the head section of your website header i.e. between between <head> and </head>.

If you are using a publishing platform such as WordPress, you should be able to insert the code directly in the main settings page under a section entitled “Header Scripts” (or something to that effect).

<script type="text/javascript">
<!--
if (top.location!= self.location) {
top.location = self.location.href
}
//-->
</script>

Two WordPress plugins are available that let you break out of frames: WP-Framebreaker and ScrapeBreaker.

ScrapeBreaker is updated more recently than WP-Framebreaker and also boasts that it prevents your website content from being scraped. However, in practice, I found WP-Framebreaker to work better. For example, when I tested both plugins on this blog for blocking websites such as BlogLovin, ScrapeBreaker did not break free from frames.

WP-Framebreaker uses the same Javascript method I noted above and therefore works perfectly. One benefit to using WP-Framebreaker instead of entering the Javascript manually is that the feature will work across all of your WordPress themes. This reduces the risk of you forgetting to add the frame breaking code to any new theme you activate in the future.

What are you waiting for; Go and start frame breaking!

Kevin

12 thoughts on “How to Break Out of Frames Using Javascript”

  1. My issue is “feedreader” copied my few contents and managed to get index on Google. You can also check your site going to their site “feedreader.com/observe/yoursitename.com/”

    My full post is visible on their site including my ads inside the post. No links to my site. When I click on any links, all opening in their site.

    Checked both of the plugins. Then settled with ScrapeBreaker. I’ve issues with both the plugins.

    ScrapeBreaker – Whey I click my post link on Google which they got indexed, it still opening in their site, but a blank page instead of the post content. That’s OK for me!

    WP-Framebreaker – It redirects the link back to my site. The problem it redirects to https protocol since my site is http

    This protocol error again make my content duplicate in the eye of google bot. So for the time being I settled with the first plugin.

  2. Haha that’s funny that they won’t “tolerate” you stopping crap services like theirs send you junk traffic.

    I hope you got the traffic cheap as it’s doubtful it would convert well. The fact they are asking you not to break frames is laughable. Glad the article helped :)

    Kevin

  3. Thanks Kevin, after a couple of hours fruitless searching I finally got the explanation of frame breaking scripts that I needed.

    I’ve been buying traffic and one of the traffic vendors claims that none of the traffic they can send me will tolerate the fact that I have a frame breaking script on my site. I had no idea of what their problem was; now I know :-)

    Erron

  4. I am not sure if this would work with Blogger as it is a hosted service. Ideally, you need complete control over the code that is displayed on your website.

  5. This doesn’t seem to work for my blog, I’m on blogger and would like to jump out of the iframe of Bloglovin

  6. Not that I am aware of. However, if you apply the changes suggested in the above post, your website will not be placed on someone else’s frames.

  7. Hi Kevin,
    Do you know of any way a user can stop this from happening? Web browser extension or something?
    Thanks,
    K

  8. Thanks Brin.

    This problem was more prevalent in the past, but the practice still goes on. A lot of websites will use frames to keep the visitor on their website, not yours.

  9. Wow – I’d heard of this but naively thought it was all somehow dealt with via Google penalties etc… it seems it’s still more prevalent than I imagined! Great post Kevin… food for thought indeed!

Leave a comment

Share This