Need to break out of iframe after content in iframe is submitted

Question

Ok, I am using an iframe on a page. The content within the iframe I have no control over and is being utilized with an Adobe Flash program.

But once the form is sumitted within the iframe (again which I have no control over), it loads up a PAGE, I DO HAVE CONTROL Over, but has that page within the IFRAME instead of it breaking out of the iframe on that page. How do I break out of the iframe on that page only??

I'm assuming that some Javascript is needed, but this code is no good:

if (top.location != self.location) {
top.location = self.location;
}

Using this code loads up the main index page for the site. I need it to just load the page after the form is submitted and break out of it. Again, I have access to the page that gets loaded within the iframe after the form gets submitted within the iframe.

Please help me.

Perhaps a tricky way of doing it is involved? For example while the page is being loaded? Or somehow check that the iframe has been submitted? I control both pages on my website (The page that holds the iframe originally and the page that the iframe gets submitted to), just not the iframes content.

Thanks :)

Answer 1

I believe you want this

if(this != top){
  top.location.href = this.location.href;
}

To break out

It might need the document reference too... I'm not at a computer to check.

if(this != top){
  top.document.location.href = this.document.location.href;
}

Answer 2

What worked for me was:

(function () {
    'use strict';
    console.log('window.top.location', window.top.location);
    console.log('window.location', window.location);

    if (window.location !== window.top.location) {
        window.top.location = window.location;
    }
})();

Inspired by https://css-tricks.com/snippets/javascript/break-out-of-iframe/

Answer 3

Chris Coyier at css-tricks.com has a nice succinct explanation of how to do this.

One way is a little clearer to the observer (as much as production Javascript code can ever said to be "clear"):

(function(window) {
  if (window.location !== window.top.location) {
    window.top.location = window.location;
  }
})(this);

The other is much shorter, but also trickier and less obvious:

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

Again, credit where credit is due: I didn't write these snippets, I'm just passing them along because they answer the question.