11484 sujets

JavaScript, DOM et API Web HTML5

Lancer un script en allant sur un anchor

Pages :
bonjour,
avec un lien depuis http://monsite.fr/page1.html
<a href=" http://monsite.fr/page2.html#monid">vers monid</a>

j'arrive sur la page2 sur l'anchor <a id="monid" href="javascript:alert('Hello');">test</a>

comment faire pour que si et simplement si un lien interne ou externe a une page amene a une id (http://monsite.fr/page2.html#monid) cela declenche automatiquement la fontion javascript ici alert?

merci
Modifié par nantais (02 Jan 2019 - 11:42)
A priori, je chercherais à faire un script Javascript dans la direction suivante:
Quand tu atteins la page 2, il y a un évènement "load" sur la page que tu peux exploiter par "onload" ou .addEventLister('load')
La propriété document.URL contient l'url de l'appel, tu peux l'analyser et trouver l'ancre en question. Tu fais alors ce que tu veux à partir de la valeur de cette ancre, quelque chose comme 

var ancre = document.URL.replace(/^.#(.*)$/, '$1');
switch(ancre) {
    case 'ancre1':
       action pour l'ancre 1
    case 'ancre2':
        action pour l'ancre 2
        .................
    default: return;
}
merci papy
mais y a til aussi un evenement load si l'on vient de la meme page
je voudrais que ca fonctionne qd on vient d'une page exterieure comme de la meme page
puis j'ai un autre probleme je ne peux me servir de l'url pour determiner l'action il faudrait que ce soit le fait d'aller jusqu'a lancre qui la lance
Modérateur
Bonjour,

L'idée est d'utiliser le fait que #monid va prendre le focus.

La fonction alert() est un peu particulière car elle prend le focus, et du coup, ça perturbe pas mal tout test déclenchant quelque chose suite à la prise de focus d'un élément.

Voici ci-dessous un exemple où on remplace alert() par une autre fonction alert2() qui se contente d'écrire dans un autre élément, mais sans prendre le focus. Lorsque l'élément #monid reçoit le focus, ce qui est le cas quand on affiche la page avec #monid dans l'url, ça déclenche l'exécution de la fonction alert2 et affiche "Hello2". Si on clique sur l'élément #monid, on affiche "Hello1" (mais on pourrait si on le souhaite afficher la même chose que quand #monid reçoit le focus).

<!doctype html>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,user-scalable=yes">
<script>
function alert2(s)
{
	document.getElementById("a").innerHTML = s;
}
</script>
</head>
<body>
<p>
	<a href="#monid">Vers #monid</a>
</p>
<p>
	<a id="monid" href="javascript:alert2('Hello1');" onfocus="alert2('Hello2');">monid</a>
</p>
<p id="a">
</p>
</body>
</html>


Amicalement,
Modifié par parsimonhi (02 Jan 2019 - 15:28)
Modérateur
Bonjour,

nantais a écrit :
merci
je pense que c'est le onfocus qui va faire l'affaire
merci


Il faudra que tu fasses attention à ce que ta balise <a> puisse recevoir le focus.

Si tu retires l'attribut href complètement, ça ne va pas marcher.

Il faut y laisser au minimum un href="javascript:void(0)".

Amicalement,
Modérateur
Bonjour,

Accessoirement, voilà une autre solution basée sur un autre évènement appelé "hashchangeevent". Utilisé conjointement avec l'évènement "onload" indiqué par PapyJP, il peut aussi faire l'affaire.

C'est plus sûr que l'évènement "onfocus" qui peut se déclencher en d'autres occasions.

Le seul inconvénient est que si "#monid" a déjà le focus, un clic sur un lien dans la même page vers l'ancre "#monid" ne fera rien. Mais il est possible que ce comportement soit justement aussi souhaité ici.


<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,user-scalable=yes">
</head>
<body>
<p>
	<a href="#monid">Vers #monid</a>
</p>
<p>
	<a href="#monautreid">Vers #monautreid</a>
</p>
<p>
	<a id="monid">monid</a>
</p>
<p>
	<a id="monautreid">monautreid</a>
</p>
<p id="a">
</p>
<script>
function msg(s)
{
	document.getElementById("a").innerHTML = s;
}
function hash1()
{
	if (window.location.hash) msg(window.location.hash + " load");
	else msg("Sans hash 1");
}
function hash2()
{
	if (window.location.hash) msg(window.location.hash + " hashchange");
	else msg("Sans hash 2");
}
window.addEventListener("load",function(){hash1();},false);
window.addEventListener("hashchange",function(){hash2();},false);
</script>
</body>
</html>

Amicalement,
Modifié par parsimonhi (02 Jan 2019 - 18:29)
Modérateur
Bonsoir,

nantais a écrit :
dans http://monsite.fr/page.html j'ai
<a id="monid" href="#" onfocus="mafonction();"></a>

quand je fais http://monsite.fr/page.html#monid
ca marche tres bien ca lance mafonction();


Oui, mais si par exemple tu cliques dans la fenêtre d'un autre logiciel, puis que tu reviens cliquer dans la fenêtre où est affiché http://monsite.fr/page.html#monid, maFonction() va à nouveau se déclencher. Il faut alors rajouter du code à l'intérieur de maFonction() pour ne rien faire dans ce cas.

De même, si tu fais une navigation au clavier (en utilisant la touche "tab") à chaque fois que tu vas arriver sur le lien <a id="monid" href="#" onfocus="mafonction();"></a>, ça va aussi déclencher maFonction() sauf si elle contient du code pour ne rien faire dans ce cas.

C'est pourquoi ma proposition d'utiliser l'évènement "onfocus" n'est sans doute pas une bonne idée.

Tout ça dépend aussi du contexte. Si ça se trouve, ça n'a aucune importance.

Amicalement,
bonjour parsimonhi

écoute apres differents tests ca marche, mais vais creuser encore un peu car si ca marche avec chrome et opera, probleme avec firefox
je ne connaissais pas onfocus en tous cas
merci
Modifié par nantais (03 Jan 2019 - 09:33)
Modérateur
Bonjour,

nantais a écrit :
probleme avec firefox


Il se peut que pour firefox, ça dépende des réglages de ton navigateur.

Si le navigateur est réglé, en ce qui concerne la navigation clavier, pour ne pas passer par tous les éléments pouvant conduire à une action, alors il se peut que ton lien #monid ne prenne jamais le focus dans ton firefox. Ça se vérifie facilement en effectuant une série de "tab" au clavier : si la navigation ne permet pas de s'arrêter sur le lien, alors il est probable que le lien ne puisse pas prendre le focus.

Amicalement,
merci je regarde

si je fais http:monsite.fr/page.html#test

avec la page.html
<body>
<script>
function test() {
document.getElementById("test").style.color = "red";
}
</script>
<a id="test" href="#" onfocus="test();">test</a>
</body>
ca fonctionne avec chrome, internet explorer, edge, opera mais pas firefox, pas pu tester pour les mac
estceque ca fonctionne sous firefox chez toi?
Modifié par nantais (03 Jan 2019 - 10:44)
Modérateur
Bonjour,

J'avais réussi hier à faire fonctionner un code sur firefox mac OS, et il m'avait semblé que ce qui avait été décisif était les réglages de la navigation clavier.

Je n'y arrive plus aujourd'hui. J'ai dû changé quelque chose (soit aux réglages du mac, soit aux réglages de firefox), mais j'arrive pas à retrouver quoi.

Historiquement il y a eu des bugs et/ou choix désopilants dans firefox avec ces histoires de focus et d'ancres. Il y en a peut-être encore. Je n'ai pas fait d'étude exhaustive sur ce sujet précis.

Encore une fois, je pense qu'une solution avec les évènements "load" et "hashchange" sera plus robuste que de se baser sur l'évènement "focus".

Amicalement,
au final
juste ca et c'est bon

<script>
window.addEventListener("hashchange", function() {
if (location.hash === "#id1") {
toto1();
}
else if (location.hash === "#id2") {
toto2();
}
else {
toto3();
}
}, false);

</script>
Modérateur
Bonjour,

Ok quand tu es déjà dans la page, mais si tu viens d'une autre page, tu as besoin d'un window.addEventListener("load", ....).

Amicalement,
oui mais ca c'etait deja regle juste avec
<script>
if (location.href.indexOf("#id1") !== -1) {
toto1();
}
if (location.href.indexOf("#id2") !== -1) {
toto2()
}
</script>
meme pas besoin de load
Pages :
Sujet clos
Aller à