Comment transmettre des infos à la page appelante

Bonsoir à tous
J'ai une page A qui, sur certaines actions provoque l'affichage d'une page B
Sur certaines actions dans la page B, je dois revenir à la page A en lui transmettant le résultat des actions de la page B. En d'autres termes, c'est l'équivalent d'un appel de fonction avec une valeur de retour.
Quelle est à votre avis la meilleur façon de réaliser cela?
Merci de vos conseils.

Bonjour,
Dans la page A, il faut ouvrir la page B avec la fonction window.open
Dans la page B, pour passer une donnée à la page A, utiliser window.opener
Le fait de faire Window.close() dans la page B permet de revenir à la page A.
Evidemment, tout ça en javascript...
Bonne journée
Modifié par jlon (19 May 2020 - 18:56)

Et l'eau,

window.open ==> mauvaise pratique, pratique obsolète

il y a plein de solutions....

frontend
- localstorage
- sessionstorage (plus pertinent que localstorage)
- cookie
- querystring

backend
- cookie
- session
- querystring
Modifié par niuxe (19 May 2020 - 19:34)

Merci de vos réponses
C’est bien les solutions auxquelles j’avais pensé
Supposons que je mette le résultat dans sessionstorage, ce qui est pour le moment ma solution préférée. Si je fais un history.back la page va être affichée comme elle était au moment de l’appel. Si je recharge la page en mettant document.location = window.referrer tout ce qui s’est passé avant l’appel est perdu.
Il faudrait un événement comme quand on fait un appel AJAX lorsque history.back est achevé

PapyJP a écrit :

Supposons que je mette le résultat dans sessionstorage, ce qui est pour le moment ma solution préférée. Si je fais un history.back la page va être affichée comme elle était au moment de l’appel. Si je recharge la page en mettant document.location = window.referrer tout ce qui s’est passé avant l’appel est perdu.
Il faudrait un événement comme quand on fait un appel AJAX lorsque history.back est achevé

sessionstorage est peut être la solution la plus approprié. Cependant, dans ton sujet tu ne dis pas quelles données tu souhaites transférer.

PapyJP a écrit :

Si je recharge la page en mettant document.location = window.referrer tout ce qui s’est passé avant l’appel est perdu.
Il faudrait un événement comme quand on fait un appel AJAX lorsque history.back est achevé

Dans ton explication, tu m'as perdu. Ce que je peux dire, fais des tests sur deux pages à part de ton projet.

Merci de ta réponse
Si je fais ça j’ai perdu tout ce qui a été fait dans la page A avant d’appeler la page B
Je pense que le mieux est de mettre la page B dans un <iframe>

Salut,

La solution du sessionStorage est la plus pertinente.
Depuis ta page A tu crées tes variables avec les infos nécessaires à la page B.

Une fois sur la page B les variables de la page A seront toujours disponible et tu pourras même ajouter des nouvelles variables à son sessionStorage.

Si tu as besoin de revenir à ta page A ton sessionStorage aura toujours les infos de la page A + ceux de la page B
Tu pourras ainsi retraiter les infos de la page B depuis ta page A

Si je reviens à la page A il faut que la page A ait un événement du genre "réveil" pour que le script aille regarder le contenu de sessionstotrage. Je n’ai pas trouvé d’événement de ce genre dans la doc.
Sinon il faut que ce soit l’utilisateur qui clique quelque part pour réveiller les scripts de la page A ce qui n’est pas ergonomique. J’ai eu des expériences malheureuses dans ce domaine.
Pour le moment j’ai mis la page B dans un <iframe> Quand le travail de la page B est terminé l’événement est transmis à la page A par un appel window.parent.xxx(data).
Modifié par PapyJP (20 May 2020 - 14:27)

PapyJP a écrit :
Si je reviens à la page A il faut que la page A ait un événement du genre "réveil" pour que le script aille regarder le contenu de sessionstotrage. Je n’ai pas trouvé d’événement de ce genre dans la doc.
Sinon il faut que ce soit l’utilisateur qui clique quelque part pour réveiller les scripts de la page A ce qui n’est pas ergonomique. J’ai eu des expériences malheureuses dans ce domaine.
Pour le moment j’ai mis la page B dans un &lt;iframe&gt; Quand le travail de la page B est terminé l’événement est transmis à la page A par un appel window.parent.xxx(data).

une iframe....

Sinon :
- popstate
- doc anglaise plus explicite (il me semble)

Effectivement ce que je cherchais c’est bien popstate. Il y a tellement d’évènements dans la doc qu’on s’y perd.
Je vais reprendre ça
Merci beaucoup
Modifié par PapyJP (21 May 2020 - 12:08)

Je n'ai pas compris comment fonctionne popstate.
j'ai écrit, conformément à ce que je vois dans la doc MDN

function tracePopstate() {
  console.log(document.title);
  alert(document.title);
}
window.onpopstate = tracePopstate;

cette fonction n'est jamais appelée
voir https://www.alma-musica.net/tests/pageA.html

PapyJP a écrit :
Si je reviens à la page A il faut que la page A ait un événement du genre "réveil" pour que le script aille regarder le contenu de sessionstotrage. Je n’ai pas trouvé d’événement de ce genre dans la doc.
Sinon il faut que ce soit l’utilisateur qui clique quelque part pour réveiller les scripts de la page A ce qui n’est pas ergonomique. J’ai eu des expériences malheureuses dans ce domaine.
Pour le moment j’ai mis la page B dans un &lt;iframe&gt; Quand le travail de la page B est terminé l’événement est transmis à la page A par un appel window.parent.xxx(data).

pourtant la doc sur MDN montre comment faire sans un script de "réveil".

Juste chargement de la page A tu fais comme l'exemple ci-dessous:

The following example autosaves the contents of a text field, and if the browser is refreshed, restores the text field content so that no writing is lost.

// Get the text field that we're going to track
let field = document.getElementById("field");
 
// See if we have an autosave value
// (this will only happen if the page is accidentally refreshed)
if (sessionStorage.getItem("autosave")) {
  // Restore the contents of the text field
  field.value = sessionStorage.getItem("autosave");
}
 
// Listen for changes in the text field
field.addEventListener("change", function() {
  // And save the results into the session storage object
  sessionStorage.setItem("autosave", field.value);
});

Example session storage

Le code que tu montres c'est ce qui se passe quand la page est chargée ou rafraichie: le script teste si la page a été déjà chargée et remet le contenu de "field" à ce qui a été mis dans sessionStorage

Ce n'est pas du tout ce que je veux faire.

La page A est la page qui sert à administrer certaines données du site, c'est à dire ce que l'administrateur veut mettre dans la BDD.
Quand il veut ajouter ou modifier un objet dans la base, il lance une page B qui (selon le type d'objet) affiche un <form>

La page B envoie par AJAX les données au serveur, elles sont testées et si c'est OK elles sont mises dans la BDD. Le résultat de l'opération est reçu par la page B qui le stocke dans sessionStograge puis se ferme.

Quand elle se ferme, il faut revenir à la page A sans la recharger de zéro.
C'est ce qui se passe si tu fais history.back(): la page n'est pas "rechargée", elle était dans le cache du navigateur, elle est simplement "affichée".

A ce moment là la page A doit regarder le résultat de l'opération accomplie par la page B qui se trouve dans sessionStorage. C'est l'équivalent de ce qui se passe en AJAX quand on récupère le résultat de l'opération effectuée sur le serveur.
Pour que ça se passe, il faut un évènement de type "réveille toi" dans la page A, évènement dont le traitement ira voir ce qu'il y a dans sessionStorage.

Je suis certain depuis le début qu'il existe un évènement de ce genre, et il semble bien que c'est popstate, comme le dit Niuxe.
Sauf que je ne suis pas arrivé à gérer cet évènement: ou bien il ne se déclenche pas et il faudrait comprendre pourquoi, ou bien il se déclenche et mon code ne le détecte pas.
Modifié par PapyJP (21 May 2020 - 12:44)