Geek Answers Handbook

Can the iframe onload child event trigger an update of the URL in the parent window while still maintaining the functionality of the return button in browsers?

Question about iframes / bookmarkablity and back button functions.

This problem that I ran into is creating an iframe with an url without losing the functionality of the back button. Suppose all pages are in the same domain and the child pages inform the parent about loading the child page to update window.location.hash to change the current address bar of the browser.
Updating 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 (only the URL changes the previous page is not loaded). If we do not update the window.location.hash property, the return button works, but the window URL does not make sense.
 Is there a way to get this functionality compared to browsers, or is there an easier way to do this (any other js libs). All pages are served from the same server to circumvent the resolution problem.

The following files:

  • index_parent.html (contains frames)
  • son.html
  • grandson.html

the son and grandson are connected, and any navigation between the son and grandson in the parent iframe updates the address bar, but interrupts 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>
+5
source share
1 answer

You can set the purpose of the back button in your loader function explicitly using history.pushState, as described here:

https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history

0

More articles:


All Articles