web-dev-qa-db-fra.com

javascript location.hash rafraîchissant dans IE

Je dois modifier le hachage, le supprimer après un certain traitement afin que, si l'utilisateur actualise, le processus ne soit pas exécuté à nouveau. 

Cela fonctionne bien en FF, mais il semble que IE recharge à chaque fois que je tente de modifier le hachage. Je pense que cela est lié à d'autres choses qui se chargent sur la page, bien que je ne sois pas certain. J'ai un iframe qui se charge (lié au processus) ainsi que des scripts en cours d'extraction dans la fenêtre parente.

Je n'arrive pas à trouver un bon moyen de changer le hachage après le chargement. Et, en même temps, je ne suis même pas certain que cela soit lié au chargement.

Des idées sur la façon de résoudre ceci?

Comportement plus étrange: Le hachage provient d'ailleurs où dans l'application Web via une redirection. J'ai trouvé que si j'ajoutais simplement le hachage à la main, en ajoutant #myid à l'URL, cela ne rechargerait pas. Peu importe si j'entre le hachage sur une page déjà chargée (en ajoutant #myid à l'URL existante) ou en entrant l'URL complète dans un nouvel onglet.

javascripthashinternet-explorerlocationreload
24
aepheus

Cela semble être un bogue avec Internet Explorer (testé avec 7 et 8).

Le changement de window.location.hash ne doit pas entraîner de rechargement. Le recours à un hachage pour le maintien de l'état est une technique JavaScript courante.

Si vous manuellement chargez une page et modifiez le hachage en utilisant JavaScript, cela fonctionnera.

Le problème est lorsque vous êtes redirigé vers la page depuis un emplacement différent (par exemple, en utilisant l'en-tête HTTP "Location"), la modification du hachage entraîne un rechargement.

Pour contourner ce bogue, vous pouvez:

1) Si vous pouvez contrôler la redirection, vous pouvez remplacer l'en-tête Location par du HTML.

<html>
<head>
    <meta http-equiv="refresh" content="0; url=__REDIRECT_LOCATION__">
    <script>window.location = "__REDIRECT_LOCATION__";</script>
</head>
</html>

2) sinon, vous pouvez essayer de recharger la page lorsqu'elle est chargée. Pour éviter une boucle de rechargement, vous devrez peut-être créer un cookie.

window.location = window.location; // window.location.reload() didn't work.

In pseudo code: 

// if is Internet Explorer
//      if ( cookie "reloadPerformed" is not set )
//          set cookie "reloadPerformed" = "1"
//          reload page
//      else 
//          clear cookie "reloadPerformed"

L’inconvénient évident est que le chargement de la page donne lieu à une requête et un rendu de deux pages. Vous voudrez donc que le rechargement soit l’une des premières choses que fait la page lors du chargement.

17
Jarne Cook

@JarneCook semble avoir raison - c'est un bogue dans IE.

Vous pourriez peut-être simplement faire:

<script type="text/javascript">
  window.location.hash = window.location.hash;
</script>

en haut de votre page. Dans des circonstances normales, cela devrait être un no-op, mais si l'utilisateur utilise IE et est arrivé via une redirection, la page sera rechargée avant même de s'apercevoir qu'elle a été chargée.

14
rjmunro

Le problème est que " Le hachage provient d'ailleurs où dans l'application Web via une redirection. " . Si vous utilisez javascript pour rediriger l'URL dans le client comme ceci:

location.href = 'test1.aspx#testhash'

ça va aller ! 

Il s’agit donc du bogue IE: lorsqu’une application Web via une redirection, le navigateur ne peut voir que l’URL précédente. Ainsi, lorsque vous modifiez le location.hash, le navigateur voit une modification de l’URL et actualise la page.

10
张小生

Le problème similaire existait dans mon projet. Mais nous ne pouvions pas utiliser les méthodes décrites ci-dessus, car lorsque IE actualisait une page, les données préchargées étaient réinitialisées . Nous avons donc utilisé la fonctionnalité du navigateur. Lorsque vous cliquez sur la balise 'a', l'événement onClick s'est produit en premier et, après le navigateur d'événement, utilisez l'attribut 'href' pour la redirection. Lorsque IE utilise href avec hash pour la redirection, le rechargement n'existe pas. Vous pouvez donc utiliser l'événement onClick pour invoquer le traitement côté serveur (__ doPostBack pour asp.net par exemple) et lorsque le traitement sera exécuté, le navigateur utilisera l'attribut 'href' pour la redirection. Ainsi, la nouvelle page ne sera pas rechargée . Vous pouvez également utiliser window.location = yourNewLocationWithHash pour appeler après le traitement côté serveur . J'espère que cette aide =)

1
Dmitry

A été confronté à ce problème, comme suggéré dans l'une des réponses, le problème était seulement quand une redirection 302/301. Le changement de hachage ne se recharge pas si la page n'était pas une redirection. Je redirigeais avec PHP et je ne voulais pas utiliser de cookie pour arrêter la redirection. 

Plus sur ce problème était là aussi dans certains navigateurs IE9, essayé 5 navigateurs IE9, 4 rechargé la page.

Voici un correctif ajouté ceci dans la section head:

<!--[if lt IE 10]>
    <script type="text/javascript">
        if(window.location.hash.replace('#','').length > 0
            && window.location.hash.search('stopredirectioninie') == -1)
        {
            window.location.href = window.location.href+'&stopredirectioninie';
        }
    </script>
<![endif]-->
1
Rishabh

Nous avons eu le même problème. 

Dans notre cas, il s'agissait d'une URL http redirigée vers https par Apache. Comme la chaîne après le signe dièse n’est jamais transmise au serveur, elle s’est perdue. 

0
jan.vdbergh

Voici une solution multi-navigateurs. Fonctionne dans IE, Chrome, Safari et FF (essayé avec les dernières versions).

var pos = location.href.indexOf('c=');
location = (pos < 0 ?
                    location + (location.href.indexOf('?') < 0 ? '?' : '&')
                    : location.href.substring(0, pos))
           + 'c=' + Math.floor(Math.random()*11) + '#' + comment_id ;

Fondamentalement, je tire parti de la chaîne de requête ("?") Pour déclencher le rechargement de page avec hachage. Ce que fait la première ligne, c’est qu’il vérifie s’il existe une chaîne de requêtes "dorée" (j’utilise la variable "c" qui signifie "comment"). S'il y a,

  1. la nouvelle URL aura tout ce qui précède "c =";
  2. ajoute ensuite notre "c =" doré + un nombre aléatoire compris entre 0 et 10 + "#" + mon identifiant de commentaire auquel le navigateur doit accéder lorsqu’il est rechargé.

Si il n'y a pas,

  1. la nouvelle URL aura tout ce que l'ancienne URL avait l'habitude d'avoir;
  2. si l'ancienne URL contient déjà une autre chaîne de requête (quelque chose après "?"), ajoutez un opérateur d'ajout de requête "&";
  3. si non "?", alors ajoutez-le;
  4. puis la requête "en or" mentionnée ci-dessus.

La raison pour laquelle j'ajoute un nombre aléatoire après "?" est-ce qu'après le premier rechargement, il y a quelque chose comme "? # comment-10". Dans ce cas, la prochaine modification apportée à l'URL ne rechargera pas la page, car le navigateur la comprend comme une instruction de saut d'ancrage.

Pour forcer le rechargement, nous devons ajouter un élément aléatoire à la requête afin que la nouvelle URL soit différente de la précédente.

Cette solution fonctionnera sur tous les navigateurs et garantira que le rechargement ne rompt pas la requête existante. Le seul note est de vous assurer que votre nom de variable de requête "doré" est unique.

J'espère que cela t'aides.

0
Eye