Can a child iframe onload event trigger a URL updation on the parent window and still keep back button functionality on browsers?
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" />
<t开发者_JAVA百科itle>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>
You can set the destination 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
加载中,请稍侯......
精彩评论