I’m trying to modify the URL of a page (actually the parent frameset) in javascript like so:
function b(str) {
window.top.location.hash = str // originally was "#"+str
return true
}
This is being called from an anchor in gen.php, like so:
<a onclick="b('Page29.html')" href="Page29.html" target="content">
The top-level page looks like this:
<!doctype html>
<html>
<head>
<title>Test</title>
</head>
<frameset cols="320,*" frameborder="0" border="0" framespacing="0">
<frame name="menu" src="gen.php">
<frame name="content" src="about:blank">
</frameset>
</html>
This works fine in Firefox, but in Safari (update: AND) Chrome just changing the anchor re-loads the entire page! This is a problem because there is state in my page that is being lost. How can I suppress this behavior?
Here is the updated code that I am trying based on suggestion below:
function b(str) {
top.location.href = "#"+str
return true
}
In this case, when I click on the link, the top-level frame drops, and the page is replaced by gen.php#Page29.html.
Update: Looks like the location.hash not working in a frame is a bug in WebKit, present since 2009:
https://bugs.webkit.org/show_bug.cgi?id=24578
Here is the fix I came up with, based on the answers below:
function b(str) {
if(history.pushState) {
top.history.replaceState(null, top.document.title, '#'+str);
} else {
top.location.hash = hash;
}
}
You should take a looat at “pushState”
http://badassjs.com/post/840846392/location-hash-is-dead-long-live-html5-pushstate