javascript - Upon Redirect of Form Submission within iFrame jQuery Not Detecting Updated Src Attribute

Question

So I have an iframe located on the page /profile/settings/index.php, i dont want my users to move away from /profile/settings/index.php while changing their settings.

The settings page automatically loads iframe-home.php. i then click on change name and it loads update.php. i then submit the form (which the action='') to submit back on itself. after updating the name, it redirects to iframe-home.php, but as you can see on the console, its still saying update.php... Heres a video of what this paragraph is about.

https://www.youtube.com/watch?v=MjALpZkmgWs&feature=youtu.be

So here's the iFrame:

<iframe src="iframe-home.php" id="settings-iframe" onload="onLoadHandler();" name="settings-iframe">
</iframe>

Whenever the page "update.php" is loaded within this iframe, there is a form on that page. Upon submission of that form, a header() Location function is called in php and the iframe is then redirected to iframe-home.php (upon successful validation, etc etc). However upon a console.log() the iframe src attribute is not being updated. The console.log is saying that i'm still on update.php and not iframe-home.php. This is a problem if i want to do something along the lines of:

function onLoadHandler() {
    var $location = $("#settings-iframe").attr("src");
    switch($location) {
        case "iframe-home.php":
            console.log($location);
            activateHome();
        break;
        case "changepassword.php":
            console.log($location);
            activatePassword();
        break;
        case "update.php":
            console.log($location);
            activateName();
        break;

    }
}

Not sure what code you need to see for this. I can't really abstract the code as i'm using about 10 different classes spread over two different programming languages.

The activate functions are changing css code. I've tested these functions and they work as indented. activateX() highlights the navigation link of the "active" page thats loaded in the iFrame.

I'm just trying to figure out how to force the iframe to reload the src attribute upon a header location redirect, or at least grab the correct src attribute. Why is the iframe telling me that i'm on update.php, when the page thats loaded it iframe-home.php...

Answer 1

EDIT:- Full jQuery solution

<iframe id="settings-iframe" name="settings-iframe"></iframe>

$(document).ready(function() {
    $('iframe#settings-iframe').on('load', function() {
    // var location = this.contentWindow.location.href;
    var location = this.contentWindow.location.href.substr(this.contentWindow.location.href.lastIndexOf('/')+1);
    console.log('location : ', location);
    switch (location) {
        case "iframe-home.php":
        console.log(location);
        activateHome();
        break;
      case "changepassword.php":
        console.log(location);
        activatePassword();
        break;
      case "update.php":
        console.log(location);
        activateName();
        break;
    }
  });
});

OLD: Try this :- var $location = this.contentWindow.location