2009-03-13 10 views
6

Sto usando ajax per aggiornare la posizione di una pagina in una cornice. Ma quando si imposta la posizione dell'hash (su Chrome e alcune versioni di IE (5.5) in particolare, ma occasionalmente su IE7) la pagina viene ricaricata.Impostazione location.hash nei frame

Il seguente codice HTML dimostra il problema.

telaio principale .... frame.html è

<html><head> 
<frameset rows="*"> 
<frame src=sethash.html frameborder=0 scrolling=auto name=somebody> 
</frameset> 
</head></html> 

pagina sethash.html è.

<html><head> 
<script language=JavaScript> 
var Count = 0; 
function sethash() 
{ 
    top.document.location.hash = "hash" + Count; 
    Count++; 
} 
</script> 
</head> 
<body onload="alert('loaded')"> 
<h1>Hello</h1> 
<input type='button' onClick='sethash()' value='Set Hash'> 
</body> 
</html>` 

Sulla maggior parte dei browser che caricano il frame.html verrà visualizzato l'avviso caricato una volta quando viene caricata la pagina. Quindi, quando viene premuto il pulsante di hash impostato, l'url verrà modificato, ma l'hash l'avviso caricato non verrà più visualizzato. Su Chrome e alcune versioni di IE

report di Microsoft, eventualmente, lo stesso problema con Internet Explorer 5.5 link text

non posso usare la Microsoft ha suggerito una soluzione, che è quello di catturare l'evento e non sparare, ma basta scorrere in vista, come sto usando impostare top.location.hash come parte dell'evento onLoad.

risposta

6

Webkit (e per estensione, Chrome) si comportano in modo strano con location.hash. Ci sono alcuni bug aperti su di esso, il più rilevante è probabilmente questo: https://bugs.webkit.org/show_bug.cgi?id=24578 che documenta il tuo problema di avere l'aggiornamento della pagina quando viene cambiato location.hash. Sembra che la tua migliore opzione in questo momento sia quella di incrociare le dita e sperare che venga prontamente risolto.

non riesco a riprodurre il bug in IE7, però, e tu sei la prima persona in età ho visto che supporta IE5.5 quindi non posso davvero aiutare lì;)

0

Avete hai provato a creare collegamenti nascosti agli hash e a far scattare il clic anche su di essi?

0

Che ne dici di fare location.href = '#yourhash'; Forse ignora il bug.

2

Avevo anche questo problema. La mia situazione mi ha permesso di creare un evento window unbind che impostava l'hash con il valore che volevo anch'io come browser utente alla pagina successiva o aggiornato. Questo ha funzionato per me, ma non sono sicuro che funzionerà per te.

con jQuery, ho fatto:

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

Tecnicamente non c'è bisogno di fare il check-webkit, ma ho pensato per le persone che fanno uso di firefox, potrebbe essere bello vedere il valore hash corretto prima che aggiorna il frameset.

-Jacob

2

per Chrome e Safari, è necessario utilizzare window.location.href per ottenere l'hash di lavoro piuttosto che window.location.hash

vedere codice qui sotto

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; 
    } 
    } 
} 
1

Ho una soluzione alternativa e coinvolge una tabella a pagina intera con iframe incorporati. Ho sostituito il mio set di cornici con un tavolo che occupa il 100% di altezza e il 100% di larghezza e ha due file. Quindi, in ognuna delle celle della tabella inserisco un iframe che occupa il 100% di altezza e larghezza per ogni cella. Questo, in sostanza, imita un frameset senza ESSERE un frameset. Meglio di tutto, nessuna ricarica sul cambio hash!

Ecco il mio codice antiche:

<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> 

... ed ecco il mio nuovo codice:

<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> 

Spero che questo aiuti.

3

È anche possibile utilizzare HTML5 history.pushState() per modificare l'hash senza ricaricare la pagina in Chrome. Qualcosa di simile a questo:

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

Nel primo argomento è necessario passare finestra in alto frame.

+0

Questo funziona. Piccola nota: [Chrome mostra uno sfarfallio nel favicon e il pulsante di interruzione/aggiornamento] (http://code.google.com/p/chromium/issues/detail?id=50298), che sembra un po 'brutto. – Blaise

Problemi correlati