Grab IFrame Source Then Update Input Textbox

http://jsbin.com/ItaZAZu/1/edit

In essence when you type say bing.com in the textbox, then once bing loads click any of the other links like images for example. I've been trying to update the input value from the iframe source when it changes locations via href within the contentWindow, but haven't had any luck. Everything I tried just didn't work, and am now clueless on how this can be done.

Any help is greatly appreciated.

Full Code:

<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
<style type="text/css">
span.style {
    cursor: pointer;
    font-family: Sans-Serif;
    font-size: 1.5em;
    font-weight: bold;
    padding: 0 .5em;
    color: #666;
}

span.style:hover {
    color: #999;
}

span.style:active {
    color: #000;
}

input#goto {
    width: 80%;
    font-family: Sans-Serif;
    font-size: 1.25em;
}

iframe#browsensearch {
    width: 100%;
    height: 90%;
}
</style>

<script type='text/javascript'>
$(document).ready(function() {
    $("#goto").click(function() {
        $(this).select();
    });

    $("#forward").click(function() {    
        history.forward();
    });

    $("#back").click(function() {
        history.back();
    });

    $("#goto").keyup(function(e) {
        var val = $(this).val(),
        sitesgohere = document.getElementById("browsensearch");

        sitesgohere.src = "http://" + val;
    });
});
</script>

<form name="sites" align="center">
    <span id="back" class="style">&lt;</span>
    <span id="forward" class="style">&gt;</span>
    <input id="goto" type="text" placeholder="http:// added by default" />
</form>

<iframe id="browsensearch" src="http://theextinctionprotocol.wordpress.com/2013/10/01/large-fireball-seen-acoss-six-midwestern-states/" width="100%" height="100%" allowtransparency="true" frameBorder="0">
    Your browser does not support IFRAME's
</iframe>