Can a child iframe onload event trigger a url updation (window.location.hash ) on the parent window(browser) and still keep back button functionality on browsers.‏

Question

The question is on iframes/bookmarkablity and back button functionality.

This issue I am facing is how to create iframes with bookmarkable url's without loosing the back button functionality.Lets say all the pages are in the same domain and the child pages inform parent of the child page load for updating the window.location.hash property to modify the current browser address bar.
The updation of the url works fine on IE/FF/webkit. But the back button works as expected in IE-8 but the browser back-button does not work in FF/webkit (just the url changes the previous page is not loaded). If we don't update the window.location.hash property the back button works but the window url is not meaningful.
Is there a way to get this functionality accross browsers, or is there an easier better way to do it (any other js libs). All pages are served from the same server to get around the permission issue.

The following files are

index_parent.html (contains the iframes)
son.html
grandson.html

son and grandson are linked and any navigation between son and grandson in the parent iframe updates the address bar but breaks the back button in FF.

cat index_parent.html

< html>
< head>
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
< title>Parent< /title>
< style>
body{
margin:0;
overflow: hidden;
}
iframe {
border: 1;
height: 100%;
width: 100%;
overflow-x: hidden;
}
< /style>

  <     script language="javascript">    
    function update(url,title){     
    alert("parent_update")    
    document.title=title;    
    window.location.hash ="#" + url; // comment this to get the back button working   
                //in FF/webkit --but makes the url  non bookmarkable     
     }    
    function parent_loader(){   
    alert("parent_loader")    
    if (window.location.hash.substr(1)) {   
        document.getElementById("embedframe").src=window.location.hash.substr(1);    
    } else {    
        document.getElementById("embedframe").src="son.html";    
    }    
     }    
<   /script>

< /head>
< body onLoad="parent_loader()" >
< H1> Parent< /H1>
< iframe name="embedframe" id="embedframe" src="" frameborder="1" >< /iframe>
< /body>
< /html>

cat son.html

< html>
< title> son < /title>

< script language="JavaScript">
function son_loader() {
alert("son_loader");
if (self.location.href!=top.location.href) {
parent.update(location.href, document.title);
}
};
< /script>

< body onload="son_loader()" >
< H1> son < /H1>
< a href="grandson.html">Grandson < /a>
< /body>
< /html>

cat grandson.html

< html>
< title> grandson < /title>

< script language="JavaScript">
function grandson_loader() {
alert("grandson_loader");
if (self.location.href!=top.location.href) {
parent.update(location.href, document.title);
}
}

< /script>

< body onload="grandson_loader()" >

< H1> Grandson < /H1>
< a href="son.html">Father < /a>
< /body>
< /html>