6

J'utilise ajax pour mettre à jour l'emplacement d'une page dans un cadre. Mais lors de la définition de l'emplacement du hachage (sur Chrome et certaines versions de IE (5.5) spécifiquement, mais parfois sur IE7) la page est en cours de rechargement.Définition de location.hash dans des cadres

Le code HTML suivant illustre le problème.

le cadre principal .... frame.html est

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

la page sethash.html est.

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

Sur la plupart des navigateurs, le chargement du fichier frame.html affiche une fois l'alerte chargée lorsque la page est chargée. Ensuite, lorsque le bouton de hachage est enfoncé, l'URL sera modifiée, mais l'alerte chargée ne s'affichera plus. Le chrome et certaines versions de IE

rapport Microsoft peut-être le même problème avec Internet Explorer 5.5 link text

Je ne peux pas utiliser la solution proposée Microsoft, qui est de capturer l'événement et non le feu, mais simplement faire défiler en vue, comme je l'utilise, définissez top.location.hash dans le cadre de l'événement onLoad.

Répondre

6

Webkit (et par extension, Chrome) se comporte étrangement avec location.hash. Il y a quelques bogues ouverts à ce sujet, le plus pertinent est probablement celui-ci: https://bugs.webkit.org/show_bug.cgi?id=24578 qui documente votre problème d'actualisation de la page lorsque location.hash est modifié. Il semble que votre meilleure option en ce moment est de croiser les doigts et espérer qu'il sera rapidement réparé.

Je ne peux pas reproduire le bug dans IE7 si, et vous êtes la première personne dans les âges que j'ai vu qui prend en charge IE5.5 donc je ne peux pas vraiment vous aider là-bas;)

0

Avez-vous essayé de créer des liens cachés aux hachages et de tirer le clic même sur eux?

0

Que faire à propos de location.href = '#yourhash'; Peut-être qu'il contourne le bug.

2

J'avais aussi ce problème. Ma situation m'a permis de créer un événement unbind de fenêtre qui définissait le hachage avec la valeur que je voulais aussi comme le navigateur de l'utilisateur à la page suivante ou rafraîchi. Cela a fonctionné pour moi, mais je ne suis pas sûr que cela fonctionnera pour vous.

Avec jquery, je l'ai fait:

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

Techniquement, vous n'avez pas besoin de faire la vérification de WebKit, mais je pensais que pour les personnes qui utilisent Firefox, il peut être agréable de voir la valeur de hachage correcte avant actualise le jeu de cadres.

-Jacob

2

pour le chrome et safari, vous devez utiliser window.location.href pour obtenir le hachage de travail plutôt que window.location.hash

voir le code ci-dessous

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

J'ai une solution de contournement et il implique une table pleine page avec des iframes incorporés. J'ai remplacé mon cadre avec une table qui prend 100% de hauteur et 100% de largeur et a deux rangées. Ensuite, dans chacune des cellules du tableau, je mets un iframe qui prend 100% de hauteur et de largeur pour chaque cellule. Cela, essentiellement, imite un jeu de cadres sans être un jeu de cadres. Le meilleur de tous, pas de rechargement sur le changement de hachage!

Voici mon ancien 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> 

... et voici mon nouveau 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.

3

Vous pouvez également utiliser HTML5 history.pushState() pour modifier la page de hachage sans recharger dans Chrome. Quelque chose comme ceci:

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

Dans le premier argument vous devez passer la fenêtre supérieure frameset.

+0

Cela fonctionne. Petite note: [Chrome montre un scintillement dans le favicon et le bouton stop/refresh] (http://code.google.com/p/chromium/issues/detail?id=50298), ce qui semble plutôt moche. – Blaise

Questions connexes