Intercepter document.write et écrire au bon endroit

Version imprimable

Bonjour,

j'aimerai intercepter les document.write et faire un innerhtml mais dans le div où le script se situe ou bien juste après ce script. Est-ce possible ?
Pour l'instant j'ai ça :
Code:

1 2 3 4 5 6 7 8 9 10 11 document.write = function(parameter) { if (!parameter) return; document.getElementById("script").innerHTML = parameter; }; </script> Bienvenue <div id="script"> <script src="https://scriptquifaitundocument.write" async></script> </div>
Mais pour le coup c'est moi qui défini le lieu alors que j'aimerai que cela soit automatique selon le script lancé car si plus loin dans une div "script2" j'ai un autre script avec document.write il va se mettre dans ma première div et pas dans la div où le script ce situe.

Merci d'avance pour vos réponses.

24/11/2020, 18h32
javatwister

Citation:

Envoyé par dzaohfz

Code:

document.write = function(parameter) {...}

Cette instruction n'existe pas en JS.

document.write(chaîne_contenant_éventuellement_du_html) est la seule utilisation possible de cette méthode;

Et puis, ce qui est drôle c'est que tu as la solution: garde uniquement document.getElementById("script").innerHTML = parameter; et enlève tout le reste de ton script (surtout le script src=...), tu verras.
24/11/2020, 20h13
dzaohfz

ok tu n'a pas compris...
suivant lol
24/11/2020, 20h18
ProgElecT

Salut

Citation:

Envoyé par dzaohfz

ok tu n'a pas compris...

Moi non plus :aie:

Citation:

Envoyé par dzaohfz

...
suivant lol

:calim2:
24/11/2020, 20h21
dzaohfz
Mais lol, bizarre.
Bon je rexplique...
j'ai des script externe qui ont des document.write
j'aimerai donc avec
Code:

1 2 3 4 5 6 document.write = function(parameter) { if (!parameter) return; document.getElementById("script").innerHTML = parameter; }; </script>
qui existe
intercepter les document.write pour les mettre donc en innerHTML à l'endroit du script
script appelé en asyn....

Merci de m'indiquer ce que vous ne comprenez pas ?
24/11/2020, 22h08
javatwister

Citation:

Envoyé par dzaohfz

intercepter les document.write

Ta réponse est fort sympathique, mais ce que tu dis et ce que tu veux restent hermétiques;
24/11/2020, 22h11
dzaohfz

Citation:

Envoyé par javatwister

Ta réponse est fort sympathique, mais ce que tu dis et ce que tu veux restent hermétiques;

qu'est-ce que tu a toujours pas compris ?
je récris la fonction document.write pour la traiter à ma façon quand elle est appelé dans un script externe.....
(c'est vieux comme le monde...)
24/11/2020, 22h37
javatwister

Citation:

Envoyé par dzaohfz

c'est vieux comme le monde...

Mais où (dans le monde) as-tu trouvé cette "réécriture" de document.write()?
24/11/2020, 22h44
dzaohfz

Citation:

Envoyé par javatwister

Mais où (dans le monde) as-tu trouvé cette "réécriture" de document.write()?

partout... il faut sortir un peu ;)

Edit : bon bref j'ai trouvé 2 solution.... une ou je défini mes div par exemple "div1" "div2" etc juste avant mes scripts et du coup je rajoute une var i que j'incremente de 1 du coup le premier appel à ma nouvelle fonction document.write met le contenu dans div+i donc div1 etc... Sauf que si le premier repond pas ou que le second répond avant l'autre ça décale tout l'affichage...
Donc après ça je suis tombé sur document.currentScript qui est the solution ça marche très bien mais pas partout.... pas de ie donc faut que je paufine dans ce sens en espérant trouver un équivalent
25/11/2020, 09h33
Golgotha

javatwister ne comprends pas, parce que ça n'a ni queue ni tête.

Y'a aucune raison d'utiliser document.write à moins d'être resté bloqué en 1965, et encore moins de créer une variable qu'on incrémente pour choper les bonnes div, c'est juste n'importe quoi ;)

Enfin bref.. c'est du code bien dégueulasse :mrgreen:

Sur ce, bon courage.
25/11/2020, 10h32
dzaohfz

Mais comme je l'ai dit c'est pas moi qui fait ce document.write, c'est un script externe.... Et justement c'est pour cela que je veux l'intercepter pour pouvoir l’implémenter en async.
Donc ça a complement une queue et une tete :p Désolé de te decevoir

Je trouve que le besoin est légitime. On ne maîtrise pas les scripts externes et c’est bien chiant quand ceux-ci utilisent du code dégueulasse, justement.

L’existence de document.write est la seule raison pour laquelle les interpréteurs HTML sont obligés, encore aujourd’hui, de faire une pause à chaque fois qu’une balise <script> (non marquée asynchrone) est rencontrée, pour passer la main à l’interpréteur JS au cas où il y aurait l’éventualité d’une probabilité de possibilité que le script contiendrait un appel à document.write. C’est une perte sèche de performance qu’on ne peut pas empêcher, malheureusement.

Mais on peut au moins maîtriser l’endroit et le moment où les scripts externes injectent leur HTML. Parce que l’interpréteur HTML est en pause au moment d’un appel à document.write, on a la garantie que le script en cours d’interprétation est la dernière balise <script> existant dans la page à ce moment. On peut utiliser un bout de code comme :
Code:

1 2 var scripts = document.getElementsByTagName("script"); var lastScript = scripts[scripts.length - 1];
Pour reléguer à plus tard l’injection du HTML de la façon dont toi tu l’entends, tu peux t’accrocher à des évènements comme "DOMContentLoaded" (sur document) ou "load" (sur window). Imaginons qu’au moment où tu redéfinis document.write, tu déclares également un tableau (ou autre structure) dans lequel tu stockes côte à côte :

le script qui appelle document.write ;
le paramètre passé.

Il devient alors simple d’itérer sur ce tableau pour injecter les paramètres au voisinage des balises <script> correspondantes.

Tu peux même encapsuler le tout dans une fermeture (closure) pour garder les choses propres :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 ;(function () { "use strict"; // https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Strict_mode var monTableau = []; // redéfinition document.write = function (parameter) { if (!parameter) return; var scripts = document.getElementsByTagName("script"); var lastScript = scripts[scripts.length - 1]; monTableau.push({ "script": lastScript, "parameter": parameter, }); }; // injection au moment voulu document.addEventListener("DOMContentLoaded", function () { var len = monTableau.length; for (var i = 0; i < len; i++) { monTableau[i].script.insertAdjacentHTML("afterend", monTableau[i].parameter); } }, false); }());
:fleche: la doc de insertAdjacentHTML

26/11/2020, 18h04
dzaohfz

AH merci :) voilà quelqu'un qui a compris.
Je vais tester ça et voir si ça fonctionne mieux que mon currentScript qui n'était pas compatible partout.

Edit :

j'ai testé donc ça ne fonctionne pas en async dommage
27/11/2020, 10h00
Golgotha

Citation:

On ne maîtrise pas les scripts externes

C'est à dire ? je vois toujours pas dans quel cas (concret) s'inscrit la démarche. Si vous voulez bien m'éclairer...
27/11/2020, 12h19
dzaohfz

bah un script "externe"... donc c'est externe.... donc on maitrise pas car c'est quelqu'un d'autre qui le code.....

En clair à l'heure actuel on ne code plus avec document.write.... mais certain site le font encore et quand on une obligation de travailler avec eux bah on subit les soucis que le document.write peut causer.
Donc c'est pour ça qu'il peut être intéressant de pouvoir intercepter ces document.write pour les implémenter d'une autre façon afin de régler certains problèmes que ça peut engendrer.

Pour ce qui est du cas concret.. Si l'on utilise par exemple un script externe (donc que l'on ne maitrise pas nous...) pour faire afficher un encart à un endroit spécial de notre site... Si la personne qui a fait le script externe n'utilise pas document.write on peut alors charger le script en async et il s'affichera à l'endroit voulu ( selon le codage fait bien sur..) Si la personne le fait avec document.write dans ce cas là on ne peut pas faire de async et là ça peut poser problème si le script externe met une plombe a se charger car tout le reste de la page va attendre ce foutu script...

A la limite, pour mettre en forme le contenu du write ou en supprimer les balises mais quand même...;

Tiens, je te mets un exemple directement inspiré de Maître Watilin:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8"> 
<title>...</title>
 
<style>
strong {display:block;margin:20px;color:red}
</style>
 
<script>
 
document.write = function(parameter){
        const scripts = document.querySelectorAll("script");
        const lastScript = scripts[scripts.length - 1];
        const elem=document.createElement("strong");
        elem.textContent=parameter;
        lastScript.insertAdjacentElement("afterend",elem);
}
 
</script>
 
</head>
<body>
 
<div>Des éléments, du texte, tout ce que vous voulez.</div>
 
<script>
document.write("un document.write anachronique")
</script>
 
<div>Des éléments, du texte, tout ce que vous voulez.</div>
 
<script>
document.write("un autre document.write anachronique")
</script>
 
<div>Des éléments, du texte, tout ce que vous voulez.</div>
 
<script>
document.write("Tiens, encore un document.write anachronique")
</script>
 
</body>
</html>

27/11/2020, 12h32
dzaohfz

@javatwister mais il n'y a pas de chargement de script externe en async la
27/11/2020, 12h33
javatwister

Ben peu importe: imagine que tu as un script externe à la place de chaque script en dur; c'est ça qui n'avait pas marché dans le code de Watilin? Je n'avais pas compris;
27/11/2020, 14h45
Golgotha

Citation:

Envoyé par dzaohfz

bah un script "externe"... donc c'est externe.... donc on maitrise pas car c'est quelqu'un d'autre qui le code.....

En clair à l'heure actuel on ne code plus avec document.write.... mais certain site le font encore et quand on une obligation de travailler avec eux bah on subit les soucis que le document.write peut causer.
Donc c'est pour ça qu'il peut être intéressant de pouvoir intercepter ces document.write pour les implémenter d'une autre façon afin de régler certains problèmes que ça peut engendrer.

Pour ce qui est du cas concret.. Si l'on utilise par exemple un script externe (donc que l'on ne maitrise pas nous...) pour faire afficher un encart à un endroit spécial de notre site... Si la personne qui a fait le script externe n'utilise pas document.write on peut alors charger le script en async et il s'affichera à l'endroit voulu ( selon le codage fait bien sur..) Si la personne le fait avec document.write dans ce cas là on ne peut pas faire de async et là ça peut poser problème si le script externe met une plombe a se charger car tout le reste de la page va attendre ce foutu script...

Qu'est-ce qui vous empêche de modifier le script en lui même ? (vous récupérer le script et faites votre version)

Après y'a aussi la solution de dire à ceux qui ont fait le script de se mettre à jour .. parce que ça fout la merde partout :mrgreen:
27/11/2020, 15h00
dzaohfz

Citation:

Envoyé par Golgotha

Qu'est-ce qui vous empêche de modifier le script en lui même ? (vous récupérer le script et faites votre version)

Après y'a aussi la solution de dire à ceux qui ont fait le script de se mettre à jour .. parce que ça fout la merde partout :mrgreen:

hé non car leur script affiche quelque chose de dynamique sinon oui je l'aurai déjà mis en dur sur mon site...

Citation:

Envoyé par javatwister

Ben peu importe: imagine que tu as un script externe à la place de chaque script en dur; c'est ça qui n'avait pas marché dans le code de Watilin? Je n'avais pas compris;

ce qui ne marche pas c'est avec le async
27/11/2020, 16h42
javatwister

Mais tu ne peux pas supprimer la propriété async? Puisque la balise apparaît bien quelque part!
27/11/2020, 17h01
dzaohfz

Je veux du async moi comme je l'ai exposer avant. Sinon il n'y a aucun intérêt à tout ça

Eh bien la seule solution que je vois est de supprimer les document.write ou de les regrouper tous à la fin.

http://javatwist.imingo.net/testwrite.htm

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8"> 
<title>...</title>
 
<style>
strong{display:block;}
.plus {margin-top:20px;color:red;text-decoration:underline;}
</style>
 
 
</head>
<body>
<script>
document.write = function(parameter){
        let topo=document.createElement("strong");
 
        if(!document.querySelector(".plus")){
                topo.classList.add("plus");
                topo.textContent="Voilà ce que vous avez raté comme jolis document.write.";
                document.body.appendChild(topo)
        }
        let elem=document.createElement("strong");
        elem.textContent=parameter;
        document.body.appendChild(elem);
        return
}
</script>
 
<div>Des éléments, du texte, tout ce que vous voulez.</div>
 
<script src="un.js" async></script>
 
<div>Des éléments, du texte, tout ce que vous voulez.</div>
 
<script src="deux.js" async></script>
 
<div>Des éléments, du texte, tout ce que vous voulez.</div>
 
<script src="trois.js" async></script>
 
<div>Des éléments, du texte, tout ce que vous voulez.</div>
 
<script src="quatre.js" async></script>
 
</body>
</html>

27/11/2020, 17h42
dzaohfz

bah non pour l'instant j'utilise le currentScript et ça fonctionne très bien sur les navigateur compatible et pour les autres j'ai fait mon système avec incrémentation de la div... j'ai pu tester vite fait au taf sur un pc qui a encore IE et ça marche bien
Après j'ai trouvé ça : https://cdn.jsdelivr.net/gh/amiller-...rrentScript.js
je testerais lundi si ça fonctionne du coup avec IE.
27/11/2020, 18h04
dzaohfz

Ah bah en faite j'ai IE11 sur mon pc la je savais même pas lol donc j'ai testé et ça fonctionne bien du coup :)
Donc problème résolu.

Bon ben c'est cool, tu insères un document.write comme si tu l'avais fait :roll:

Je te conseille quand même de le souligner pour repérer où il y en avait;
Et puis, un détail: utilise plutôt le paramètre "beforebegin" au cas où un script contiendrait plusieurs write;
Code:

1 2 3 4 5 document.write = function(parameter){ let elem=document.createElement("strong"); elem.textContent="WRITE - " + parameter + " - WRITE"; document.currentScript.insertAdjacentElement("beforebegin",elem); }