Différence Chrome/Edge [Résolu]

Signaler
Messages postés
147
Date d'inscription
mardi 21 février 2012
Statut
Membre
Dernière intervention
22 juin 2020
-
Messages postés
147
Date d'inscription
mardi 21 février 2012
Statut
Membre
Dernière intervention
22 juin 2020
-
Bonjour,

J'ai créé un code JavaScript qui crée dynamiquement une page dès le chargement, avec document.open(). Ca peut paraître un peu brutal, puisque la page d'origine n’apparaît jamais, mais ça correspond exactement à ce que je veux faire.
Mon projet est un peu complexe mais j'ai isolé le problème dans le petit code suivant:

<!DOCTYPE [/html/htmlintro.php3 html]>
<html>
<head>
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <title>JS Tester</title>
</head>

<script type="text/javascript">
    var index = 5;

    $(document).ready(function() {
        callPage();
    });

    function callPage() {
        document.open();
        document.write('<!DOCTYPE html>');
        document.write('<html>');
        document.write('<body>');
        document.write('<button id="DecButton" onclick="decrementIndex()" style="height: 30px; width: 50px"> - </button>');
        document.write('<p id="indexVal">' + index + '</p>');
        document.write('<button id="IncButton" onclick="incrementIndex()" style="height: 30px; width: 50px"> + </button>');
        document.write('<br>');
        document.write('</body>');
        document.write('</html>');
        document.close();
        document.title = 'Generated Page';
    }
    function decrementIndex() {
        index--;
        document.getElementById("indexVal").innerHTML = index;
    }
    function incrementIndex() {
        index++;
        document.getElementById("indexVal").innerHTML = index;
    }
</script>

<body>
Hello World
</body>

</html>


Le code est également accessible ici: http://emarciano.free.fr/js/tester.html

Bien évidemment, le "Hello World" qui constitue la page d'origine n'apparait jamais puisqu'il est remplacé dès le chargement par la page générée par code, avec les 2 boutons permettant de faire varier la valeur affichée.

Ce code marche très bien dans Chrome, Firefox et Safari, mais pas dans Edge ni IE. Dans ces navigateurs, j'ai une erreur m'indiquant que les fonctions ne sont pas définies. Je pense que c'est dû au fait qu'elles ne sont pas définies dans la page générée et qu'elles ne sont donc pas connues une fois qu'elle est affichée, mais alors pourquoi ça marche dans Chrome?
Il semblerait que Chrome (et Firefox/Safari) conservent le contexte d'origine (variables globales et fonctions) mais pas Edge. Pourquoi?
Est-ce que vous connaissez un moyen de contourner cela?

Merci,
Eric

EDIT : Correction des balises de code pour avoir l'indentation et la coloration syntaxique. Merci d'y penser à l'avenir.

Configuration: Windows / Chrome 79.0.3945.130

4 réponses

Messages postés
28912
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
7 juillet 2020
2 602
Bonjour,

Vu que le document.open supprime tout le contenu de la page.. il supprime également le JS et les includes ( le load de ton jquery )
Je pense que ça fonctionne dans certains navigateurs en fonction du fonctionnement de la mise en cache (ou non) du javascript chargé dans ta page lors de son ouverture.

Si, ton code actuel génère bien le html voulu... tu n'as qu'a ajouter dans le document write, l'écriture du code js de tes fonctions...

NB: Vu que tu n'utilises jquery que pour faire un
 $(document).ready

le mieux serait de le retirer et de simplement déplacer ton code JS à la fin de ta page ( juste avant le </body> )

Messages postés
147
Date d'inscription
mardi 21 février 2012
Statut
Membre
Dernière intervention
22 juin 2020
9
Je comprends, et c'est bien ce que je pensais. Après tout, ce comportement est logique: la nouvelle page créée après le document.open ne contient aucun code JS, donc normal que les fonctions soient introuvables. Maintenant pourquoi ça fonctionne dans Chrome? Sans doute car tout est dans le cache.

Comme tu le dis, je pourrais très bien ajouter mes petites fonctions dans la nouvelle page par des document.write, ça marcherait, mais le problème c'est que la valeur de l'index, défini en variable globale dans la page d'origine, serait perdu. J'ai déjà essayé dans Edge et il me dit alors que la variable 'index' est inconnue, et l'execution du JS s'arrête brutalement.

La solution serait peut-être de ne pas créer un nouvelle page toute vierge, mais d'adapter la page existante en y ajoutant les éléments nécessaires. J'ai lu que document.open permet d'écrire par dessus le document courant ou d'y ajouter du contenu (https://developer.mozilla.org/fr/docs/Web/API/Document/open) mais je ne vois pas comment ajouter du contenu plutôt que créer une nouvelle page. Je pensais que open prendrait des paramètres permettant de choisir, mais je 'ai rien trouvé dans ce sens.
Si je pouvais modifier la page courante en enlevant/ajoutant des éléments, je serais sauvé puisque la code JS et les variables globales seraient conservées, mais je ne sais pas comment faire ça...

Merci de votre aide,
Eric
Messages postés
28912
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
7 juillet 2020
2 602
Si c'est juste le contenu de la page que tu veux modifier... il te suffit de supprimer le contenu du body et d'y écrire ce que tu souhaites.
De cette façon tu n'effaces pas le <head> de ta page et donc de tes JS .
Messages postés
147
Date d'inscription
mardi 21 février 2012
Statut
Membre
Dernière intervention
22 juin 2020
9 >
Messages postés
28912
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
7 juillet 2020

Oui, c'est exactement ce que je veux faire, mais je ne sais pas comment supprimer le body. Je sais en créer un autre avec document.createElement, mais je ne sais pas en supprimer un. Tu peux m'indiquer comment faire ?

Merci,
Eric
Messages postés
28912
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
7 juillet 2020
2 602 >
Messages postés
147
Date d'inscription
mardi 21 février 2012
Statut
Membre
Dernière intervention
22 juin 2020

J'ai l'impression que tu as du mal à faire des recherches sur internet.

Bref...

Pour cibler le "body" de ton document
var monBody = document.body; 



Pour effacer son contenu
monBody.innerHTML = "";


Pour y mettre du contenu
<code js>
monBody.innerHTML = "<div id='div_1'>Ceci est un exemple</div>";

</code>
Messages postés
147
Date d'inscription
mardi 21 février 2012
Statut
Membre
Dernière intervention
22 juin 2020
9 >
Messages postés
28912
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
7 juillet 2020

Non, j'ai beaucoup cherché, et je n'aurais pas penser à faire innerHTML = "" pour effacer le body. Je cherchais plutôt une fonction de l'objet document pour cela, alors évidemment...

En tout cas, merci pour le coup de main.
il y a la méthode removeChild
Messages postés
147
Date d'inscription
mardi 21 février 2012
Statut
Membre
Dernière intervention
22 juin 2020
9
Merci, j'ai ré-écrit mon code en mettant un <div> contenant la partie variable de la page plutôt que d'écrire une nouvelle page à chaque fois. Ca marche parfaitement, aussi bien sous Chrome que sous Edge, et le code est bien plus propre.

Merci encore pour votre aide.