Redirection sur l'ancre d'une même page
Résolu
Bertrand40
Messages postés
1344
Statut
Membre
-
Bertrand40 Messages postés 1344 Statut Membre -
Bertrand40 Messages postés 1344 Statut Membre -
Bonjour tout le monde,
Je viens vers vous après des heures de recherches et de tests infructueux.
Voici la page sur laquelle je teste le script : http://www.pronostics-formule1.fr/xtestx.php
Je cherche à faire quelque chose de simple a priori, mais impossible de le faire fonctionner sous tous les navigateurs. Je souhaiterais, via JS obligatoirement (sinon ça m'obligerait à changer tout le code) :
- effacer une page et mettre un msg d'alerte (ça fonctionne)
- rediriger vers une ancre de cette même page (le problème est là)
Voici le code, dont le code JS qui semble le plus logique :
Comportement sous les différents navigateurs :
- FF 20 : ça marche très bien
- Chrome 26 : il y a refresh, ça descend à l'ancre, puis ça remonte
- IE 10 : il y a refresh, mais aucun effet vis à vis de l'ancre
- Opera 12 : idem IE 10.
J'ai essayé beaucoup de choses :
- window.location.reload();
- window.location.reload(true);
- window.location.reload(false);
- window.location.href..
- etc...
Rien y fait, je suis démuni. :/
En espérant que vous pourrez m'aider.
--
Le jambon de Bayonne c'est bon ! Non, disons que personnellement je trouve ça bon.
Je viens vers vous après des heures de recherches et de tests infructueux.
Voici la page sur laquelle je teste le script : http://www.pronostics-formule1.fr/xtestx.php
Je cherche à faire quelque chose de simple a priori, mais impossible de le faire fonctionner sous tous les navigateurs. Je souhaiterais, via JS obligatoirement (sinon ça m'obligerait à changer tout le code) :
- effacer une page et mettre un msg d'alerte (ça fonctionne)
- rediriger vers une ancre de cette même page (le problème est là)
Voici le code, dont le code JS qui semble le plus logique :
<p id="test" style="cursor:pointer;">CLIQUEZ ICI</p> <p id="ancre" style="margin:400px 0;">ICI l'ancre</p>
$("#test").click(function() {
$('#content').empty().fadeIn().append('<p class="notification valide">redirection en cours</p>');
setTimeout(function(){
window.location.replace("http://www.pronostics-formule1.fr/xtestx.php#ancre");
window.location.reload();
},1000);
});
Comportement sous les différents navigateurs :
- FF 20 : ça marche très bien
- Chrome 26 : il y a refresh, ça descend à l'ancre, puis ça remonte
- IE 10 : il y a refresh, mais aucun effet vis à vis de l'ancre
- Opera 12 : idem IE 10.
J'ai essayé beaucoup de choses :
- window.location.reload();
- window.location.reload(true);
- window.location.reload(false);
- window.location.href..
- etc...
Rien y fait, je suis démuni. :/
En espérant que vous pourrez m'aider.
--
Le jambon de Bayonne c'est bon ! Non, disons que personnellement je trouve ça bon.
2 réponses
-
$("#test").click(function() { $('#content').empty().fadeIn().append('<p class="notification valide">redirection en cours</p>'); setTimeout(function(){ window.location.hash="ancre"; },1000); });Une ancre? On recharge pas la page!-
En fait j'ai pas tout dit.
Lorsqu'on clique, il y a soumission d'un formulaire (message sur le forum) et il faut recharger la page pour afficher le nouveau contenu.
Quoiqu'il en soit, il faut de toute manière recharger la page car j'efface le contenu :
$('#content').empty() -
On ne peut pas faire window.location.replace en même temps qu'un envoi.
En estimant que le serveur tourne avec PHP, une solution serait de faire écrire un bout de javascript qui va faire défiler jusqu'à l'ancre du nouveau post:<script>window.location.hash = "post<?php echo $numeroPost ?>";</script>
A mettre à la fin de la page pour que ce soit exécuté une fois la page chargée. -
L'envoi est avant.
clic > envoi Ajax > refresh et affichage
Il semblerait que ce soit plutôt un problème de comportement de navigateur, puisque FF en est capable, et que les autres navigateurs en étaient capables il y a de ça quelques mois.
J'ai ajouté un bout de code de ce type, ça fonctionne mais c'est pas top je trouve :if (window.location.hash) { $('html, body').animate({ 'scrollTop': $(window.location.hash).offset().top }, 2000); } -
Dans ce cas, il vaut mieux de faire un envoi ET une réception AJAX: on envoie le post, on reçoit un message d'erreur ou d'envoi terminé avec l'ID du post. En JSON c'est pas mal.
// Ton envoi en AJAX xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState === 4 && xmlhttp.status === 200) { var json = JSON.parse(xmlhttp.responseText); switch(json.status) { case "OK": $('#content').append(json.postHTML); window.location.hash = json.postID; break; case "ERR": $('#content').empty().append("Oh mon dieu une erreur"); break; } } }En faisant comme ça il faut que coté PHP/JSP/ASP ça renvoie ça:{ "status": "OK", "postHTML": "<div class=\"post\" name=\"post164\">Ici le contenu du post ajouté en direct</div>", "postID": "post164" }
C'est un peu compliqué mais c'est très flexible et dynamique comme méthode. -
En fait mon bout de code ne fonctionne pas, j'avais pas vu que la page n'était pas tout à fait chargée.
Je vais essayer de comprendre ce que tu me proposes, mais je ne connais pas du tout. Je fais de l'Ajax assisté par JQuery à la base. Merci quoiqu'il en soit.
-
-
J'avais oublié cette discussion, désolé..
Le problème a été contourné en ajoutant une valeur aléatoire à l'URL (j'ai mis une date tout simplement).
