window.location.hash breaks the back button using iframes

**benslayton** · 07-17-2009, 10:04 PM

IM trying to use Javascript to load a page into a hidden iframe (Not hidden yet for dev purposes) and then grab the html from the frame and put it into a div on the parent page.. Also I have js code to bookmark the page using hash..

However.. When I add

Code:

window.location.hash = frameURL;

to my js it breaks the back button...
What am I missing here??

index.html (Page that the user goes to..)

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Facebook Style Loading</title>
<script>
function loadHash() {
	currentURL = document.location.href;
	splitURL = currentURL.split("#");
	i = splitURL[1];
	if(!i){
	i='default.html';
	}
	nextHref = "#" + i;
	document.getElementById('frameContent').src=i;
}

function pageLoad(href){
	var url = href.href;
	document.getElementById('frameContent').src=url;
	
}

function updateContent(frameURL){
	var myIFrame = document.getElementById('frameContent');  
	var frameContent = myIFrame.contentWindow.document.body.innerHTML;
	// get the content div
	var content = document.getElementById('content');

	// set innerHTML (update the page)
	content.innerHTML = frameContent;
	
	//This code breaks the back button in FireFox
	window.location.hash = frameURL;
	
}
</script>
</head>

<body onload="loadHash()">
<a href="page1.html" onclick="pageLoad(this); return false;">Page 1</a> | 
<a href="page2.html" onclick="pageLoad(this); return false;">Page 2</a> | 
<a href="page3.html" onclick="pageLoad(this); return false;">Page 3</a> | 
<a href="page4.html" onclick="pageLoad(this); return false;">Page 4</a> | 
<a href="page5.html" onclick="pageLoad(this); return false;">Page 5</a> | 
<a href="page6.html" onclick="pageLoad(this); return false;">Page 6</a> | 
<a href="page7.html" onclick="pageLoad(this); return false;">Page 7</a> | 
<a href="page8.html" onclick="pageLoad(this); return false;">Page 8</a> | 
<hr />
<div id="content"></div>
<iframe id='frameContent' name='frameContent' frameborder='1' height='500' width='500'></iframe>
</body>
</html>

page1.html (this is one of the pages that is loaded into the iframe and then into the div. they other pages that are like page2.html, page3.html, etc, are setup the same way just with the corresponding page id numbers inside of them)

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Page 1</title>
<script type="text/javascript">function fireUpdate(){window.top.window.updateContent(document.location.pathname);}</script>
	</head>
	<body onload="fireUpdate();"></body>
This is page 1
</body>
</html>

Please someone help me out.. That would be great!! Also, it seems to be breaking the back button all together in FF 3.0.11.
In IE 8 it seems to be making the users click the back button twice for them to actually go back...
In IE 7 and 6 it works fine...
I havent tried google chrome, opera or any other browsers..

Open to hear performance!

**etxe** · 11-10-2011, 02:37 PM

Hi benslayton , are you alive?

Have you find a solution for this ? I have the same problem and not find solutions anywhere.

Thanks

Thread: window.location.hash breaks the back button using iframes

Thread Tools

Search Thread

window.location.hash breaks the back button using iframes

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions