Pour quelle raison le JS s'excute en premier ?

8 octobre 2021 à 16:52:09

Hello,

Avec le code suivant, le popup js s'affiche avant le html "BLABLA.

Loin d'etre un expert js, je fais appel à vos lumières... Merci !

<html>
<body>
BLABLA

<?php
$message = "Coucou!";
?>
 
<script type="text/javascript" defer>
var msg='<?PHP echo $message;?>';
 alert(msg);
</script>
</body>

</html>

-
Edité par Bibou64 8 octobre 2021 à 16:53:39

Domi65

8 octobre 2021 à 17:35:25

Les navigateurs lisent et interprètent le code de haut en bas.

Imagines que ton javascript demande via la fonctionwrite() d'ajouter un bout de texte. Tu seras content que ce soit fait dans cet ordre, sinon, tu ne saurais pas où il va être affiché. dans le cas de ton alerte, c'est pareil.

C'est pourquoi d'ailleurs, lorsqu'on charge du JS qui doit modifier le DOM avant d'avoir chargé les éléments HTML, on obtient un message du type : "element is null", et que donc on passe par une fonction qui est appelée lorsque le document est chargé :

document.body.onload = function() { // ici le code JS }

-
Edité par Domi65 8 octobre 2021 à 17:36:10

Bibou64

8 octobre 2021 à 17:47:18

Merci @Domi65 pour ta réponse.

Mais je ne suis pas certain de l'avoir correctement interprétée: avec le code ci-dessous, j'otiens toujours le pop-up en premier :-(

<html>

<body>

	BLABLA3

	<?php
		$message = "Coucou !";
	?>

	<script type="text/javascript">
		document.body.onload = function() {
		var msg='<?PHP echo $message;?>';
		alert(msg);
		}
	</script>

</body>

</html>

AbcAbc6

8 octobre 2021 à 18:14:47

Bonjour, j'utiliserais plutôt un écouteur d'évènement pour savoir si

soit le dom est charger,
soit si le dom + fichier inclus dans la page sont charger.

<!doctype html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <title>test JS</title>
    </head>
 <body>
        BLABLA3

        <?php
        $message = "Coucou!";
        ?>

        <script>
            window.addEventListener("DOMContentLoaded", () => {
                console.log("DOM entièrement chargé et analysé");
                let msg = '<?PHP echo $message; ?>';
                alert(msg);
            });

        </script>
    </body>
</html>

https://developer.mozilla.org/fr/docs/Web/API/Window/DOMContentLoaded_event

https://developer.mozilla.org/fr/docs/Web/API/Window/load_event

BrainError

8 octobre 2021 à 22:47:02

Salut,

Perso je pencherais plus pour un problème de rendu interrompu par la boîte de dialogue.

Aucune raison pour que ton "BLABLA3" ne soit pas charger dans le DOM au moment de l'exécution de ton code JS, qu'il y ait un évènement "DOMContentLoaded", un évènement "load" ou rien du tout avant l'exécution de ton code, ça change rien au fait que ton texte devrait bien être chargé dans le DOM.

En revanche, pas dit que le navigateur ait eu le temps de procéder au rendu sur la page lorsque la boîte de dialogue charge.

Tu peux tenter d'encapsuler ton code dans un requestAnimationFrame pour attendre la prochaine frame de rendu avant d'exécuter ton code.

Dit moi si ça resout le problème.