Setting Location.hash In Frames

November 28, 2022 Post a Comment

I am using ajax to update the location of a page in a frame. But when setting the location of the hash (on Chrome and some versions of IE (5.5) specifically, but occasionally on IE

Solution 1:

Webkit (and by extension, Chrome) behave strangely with location.hash. There are a few open bugs about it, the most relevant is probably this one: https://bugs.webkit.org/show_bug.cgi?id=24578 that documents your problem of having the page refresh when location.hash is changed. It looks like your best option right now is to cross your fingers and hope that it gets promptly fixed.

I can't reproduce the bug in IE7 though, and you're the first person in ages I've seen that supports IE5.5 so I can't really help you there ;)

Solution 2:

You could also use HTML5 history.pushState() to change hash without reloading page in Chrome. Something like this:

// frameset hash change function
function changeHash(win, hash) {
    if(history.pushState) {
        win.history.replaceState(null, win.document.title, '#'+hash);
    } else {
        win.location.hash = hash;
    }
}

In the first argument you need to pass frameset top window.

Solution 3:

I was having this problem as well. My situation allowed me to create a window unbind event that set the hash with the value I wanted it too as the user browser to the next page or refreshed. This worked for me, but not sure it will work for you.

With jquery, I did:

if($.browser.webkit){
    $(window).unload(function() {
        top.window.location.hash = hash_value;
    });
}else{
    top.window.location.hash = hash_value;
}

Technically you don't need to do the webkit check, but I thought for people who use firefox, it might be nice to see the correct hash value before they refresh the frameset.

-Jacob

Solution 4:

for chrome and safari, you need to use window.location.href to get the hash working rather than window.location.hash

see code below

function loadHash(varHash)
{
  if(varHash != undefined) {
    var strBrowser = navigator.userAgent.toLowerCase();

    if (strBrowser.indexOf('chrome') > 0 || strBrowser.indexOf('safari') > 0) {
        this.location.href = "#" + varHash;
    }
    else {
        this.window.location.hash = "#" + varHash;
    }
  }
}

Solution 5:

I have a workaround and it involves a full-page table with embedded iframes. I replaced my frameset with a table that takes up 100% height and 100% width and has two rows. Then, in each of the table cells I put an iframe that takes up 100% height and width for each cell. This, essentially, mimics a frameset without BEING a frameset. Best of all, no reload on hash change!

Here's my old code:

<html>
<head>
<title>Title</title>
</head>
<frameset rows="48,*" frameborder="yes" border="1">
    <frame name="header" noresize="noresize" scrolling="no" src="http://header" target="_top">
    <frame name="main" src="http://body" target="_top">
    <noframes>
    <body>
    <p>This page uses frames, but your browser doesn&#39;t support them.</p>
    </body>
    </noframes>
</frameset>
</html>

...and here's my new code:

<html>
<head>
<title>Title</title>
<style type="text/css">
body { margin: 0px; padding: 0px; border: none; height: 100%; }
table { height:100%; width:100% }
td { padding: 0px; margin: 0px; border: none; }
td.header { height: 48px; background-color: black; }
td.body { background-color: silver; }
iframe.header { border: none; width: 100%; height: 100%; }
iframe.body { border: none; width: 100%; height: 100%; }
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0">
  <tr><td class="header"><iframe class="header" src="http://header" target="_top" scrolling="no"></iframe></td></tr>
  <tr><td class="body"><iframe class="body" src="http://body" scrolling="no"></iframe></td></tr>
</table>
</body>
</html>

Hope this helps.

javascript edu