Encore un siouxerie JavaScript qui m’a fait m’arracher les cheveux qui me restent avant de trouver la solution.
Habitué par le passé, à coder en html/javascript, je me souvenais que l’on pouvait simuler un lien par du JavaScript en utilisant le code suivant par exemple :

    <span onclick="window.location='nouvellePage.htm'"> cliquez ici </span>

Sauf que voilà sur mes derniers tests cela ne fonctionne pas !

J’ai donc cherché et testé un paquet de méthodes pour arriver à mes fins.
Et j’ai fini par trouver la solution que je vous livre ci-dessous.

Solution

Il faut donc utiliser window.location.href, combiné à la méthode setTimeout() normalement utilisée pour retarder l’exécution d’une action javascript.

Ne me demandez pas le pourquoi ce ce mystère, mais cette méthode a le mérite de fonctionner sur les divers navigateurs testé dont :

  • Firefox 3.0
  • Internet Explorer 7
  • Chrome 2
  • Safari
  • Opera

L’explication que j’ai pu lire est que certains navigateurs n’effectueront pas le changement de page tant que la page en cours n’aura pas terminé son chargement.
Par ailleurs il semblerait (à vérifier) que window.location soit une ancienne forme qui ne devrais plus être utilisé, mais certains sites mentionne window.location.href comme une abbération microsoft ? Qui croire ? … toujours est il que parfois ca marche sans le href et parfois non… (et cela sur les meme navigateurs mais des machines différentes).

Si quelqu’un qui passe par la a une idée ou une explication, je prends.

Sinon, une chose intéressante est aussi d’externaliser le code ci-dessus pour le réutiliser à plusieurs endroits.
Mais attention il peut-être perturbant d’utiliser setTimeout et window.location.href dans une fonction javascript paramétrable du fait de la position des doubles et simple guillemets!

Voici donc un exemple correct :

    <script type="text/javascript">  
        function changePageSimple(newpage){ 
            // Attention a noter la position des " et ' très importante sinon cela ne marche pas. 
            setTimeout("window.location.href = '"+newpage+".php'" , 0 ); 
        } 
    </script>

suivi de …

    <li onclick="changePageSimple('nouvellePage');">cliquez ici</li>

Encore une fois j’espère avoir été utile à quelqu’un et que le temps que j’ai pu moi même passer à trouver la solution à ce problème ait été épargné à une autre personne.