OVH Cloud OVH Cloud

Onload dynamique et adaptatif

9 réponses
Avatar
Olivier Miakinen
Bonjour,

J'ai un petit problème avec contraintes en JavaScript, que je ne sais
pas résoudre.

L'idée est de rajouter un simple script dans plusieurs dizaines de pages
HTML en ajoutant juste une ligne :
<script type="text/javascript" src="/javascript/monscript.js"></script>

Le fichier monscript.js définit une fonction MaFonction() qui devra être
appelée lorsque la page HTML aura fini de se charger.

Simple, me direz-vous ? Oui, sauf que :
- je ne veux rien changer d'autre aux fichiers HTML ;
- certains fichiers HTML ont déjà un <body onload="AutreFonction()"> ;
- certains fichiers HTML incluent déjà un script avec une instruction
« window.onload = AutreFonction; ».

Que puis-je faire pour ajouter mon appel de fonction sans rien casser
dans ce qui existe déjà ?

--
Olivier Miakinen
Non, monsieur le juge, je vous le jure : jamais je n'ai cité
Bruxelles dans ma signature.

9 réponses

Avatar
YD
L'idée est de rajouter un simple script dans plusieurs dizaines de pages
HTML en ajoutant juste une ligne :
<script type="text/javascript" src="/javascript/monscript.js"></script>

Le fichier monscript.js définit une fonction MaFonction() qui devra être
appelée lorsque la page HTML aura fini de se charger.
Simple, me direz-vous ? Oui, sauf que :
- je ne veux rien changer d'autre aux fichiers HTML ;
- certains fichiers HTML ont déjà un <body onload="AutreFonction()"> ;
- certains fichiers HTML incluent déjà un script avec une instruction
« window.onload = AutreFonction; ».

Que puis-je faire pour ajouter mon appel de fonction sans rien casser
dans ce qui existe déjà ?


Ben ! l'ajouter simplement à ce qui existe déjà !

Pour cela placer le script en fin de body et y inclure ce genre de code,
(après tests rapides, ça marche aussi bien pour la définition par script
que par attribut du body) :

if(window.onload){
var oldOnload=window.onload;
window.onload=function(){
oldOnload();
maFonction();
}
} else window.onload=maFonction;

That's all!

--
Y.D.

Avatar
Olivier Miakinen

Que puis-je faire pour ajouter mon appel de fonction sans rien casser
dans ce qui existe déjà ?


Ben ! l'ajouter simplement à ce qui existe déjà !

Pour cela placer le script en fin de body et y inclure ce genre de code,
(après tests rapides, ça marche aussi bien pour la définition par script
que par attribut du body) :

if(window.onload){
var oldOnload=window.onload;
window.onload=function(){
oldOnload();
maFonction();
}
} else window.onload=maFonction;


Je te remercie, cela fonctionne effectivement. Mais... a-t-on vraiment
le droit d'inclure un script à la fin de body ? Je croyais que le
placement correct de <script type="..." src="..."></script> était entre
<head> et </head>.

--
Olivier Miakinen
Non, monsieur le juge, je vous le jure : jamais je n'ai cité
Bruxelles dans ma signature.


Avatar
ASM

Mais... a-t-on vraiment
le droit d'inclure un script à la fin de body ? Je croyais que le
placement correct de <script type="..." src="..."></script> était entre
<head> et </head>.


même après </html>
les scripts JS fonctionnent

c'est donc qu'on a le droit ;-)


--
Stephane Moriaux et son [moins] vieux Mac

Avatar
YD

... a-t-on vraiment
le droit d'inclure un script à la fin de body ? Je croyais que le
placement correct de <script type="..." src="..."></script> était entre
<head> et </head>.


"The SCRIPT element places a script within a document. This element may appear
any number of times in the HEAD or BODY of an HTML document."

in 18.2.1 The SCRIPT element, HTML4.01 specs.

Cela répond à ta question !

--
Y.D.

Avatar
Olivier Miakinen

... a-t-on vraiment
le droit d'inclure un script à la fin de body ? Je croyais que le
placement correct de <script type="..." src="..."></script> était entre
<head> et </head>.


"The SCRIPT element places a script within a document. This element may appear
any number of times in the HEAD or BODY of an HTML document."

in 18.2.1 The SCRIPT element, HTML4.01 specs.

Cela répond à ta question !


Oui, en effet. D'ailleurs j'ai fini par le retrouver moi-même dans les
DTD, où le traitement est différent selon qu'on est en Transitional ou
en Strict mais où le résultat est le même.

<cit. http://www.w3.org/TR/html401/sgml/loosedtd.html>
<!ELEMENT BODY O O (%flow;)* +(INS|DEL)>
<!ENTITY % flow "%block; | %inline;">
<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; |
%formctrl;">
<!ENTITY % special
"A | IMG | APPLET | OBJECT | FONT | BASEFONT | BR | SCRIPT |
MAP | Q | SUB | SUP | SPAN | BDO | IFRAME">
</cit.>

<cit. http://www.w3.org/TR/html401/sgml/dtd.html>
<!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL)>
</cit.>


Merci en tout cas. La méthode est tellement générique que l'on peut la
répéter plusieurs fois dans le même fichier HTML, pourvu que l'on donne
des noms différents à chaque fonction appelée, mais aussi à chaque
variable temporaire « oldOnload ».

--
Olivier Miakinen
Non, monsieur le juge, je vous le jure : jamais je n'ai cité
Bruxelles dans ma signature.


Avatar
YD

D'ailleurs j'ai fini par le retrouver moi-même dans les
DTD...


Cela m'étonnait que tu ne l'eusses pas fait.
(Mince un alexandrin, bon sans hémistiche...)

La méthode est tellement générique que l'on peut la
répéter plusieurs fois dans le même fichier HTML, pourvu que l'on donne
des noms différents à chaque fonction appelée, mais aussi à chaque
variable temporaire « oldOnload ».


Tu ne l'avais pas dit au début ! Tir rectifié :

function loadAll(oneMore){
if(window.onload){
var oldOnload=window.onload;
window.onload=function(){
oldOnload();
oneMore();
}
} else onload=function(){oneMore();}
}

à utiliser après avoir défini maFonction ainsi :

function maFonction1(){/*la déf.*/}
loadAll(maFonction1);

oldOnload est ici définie en variable locale, avec closure.
Autant d'appels que nécessaire (pas testé extensivement mais il n'y a
pas de raison..).

--
Y.D.

Avatar
Olivier Miakinen

Cela m'étonnait que tu ne l'eusses pas fait.
(Mince un alexandrin, bon sans hémistiche...)


Excellent. On se croirait sur fllf (et c'est un compliment).

La méthode est tellement générique que l'on peut la
répéter plusieurs fois dans le même fichier HTML, pourvu que l'on donne
des noms différents à chaque fonction appelée, mais aussi à chaque
variable temporaire « oldOnload ».


Tu ne l'avais pas dit au début !


Eh oui, parce que je n'y avais pas pensé au début. C'est seulement après
que je me suis dit que l'on pourrait ajouter ainsi plusieurs fonctions
dans des scripts séparés.

Tir rectifié :

function loadAll(oneMore){
if(window.onload){
var oldOnload=window.onload;
window.onload=function(){
oldOnload();
oneMore();
}
} else onload=function(){oneMore();}
}


Oui, bien sûr, oldOnload est alors une variable locale.

à utiliser après avoir défini maFonction ainsi :

function maFonction1(){/*la déf.*/}
loadAll(maFonction1);


Si on veut éviter de polluer l'espace de nommage avec maFonction1, je
suppose que l'on peut même écrire :

loadAll(function() {
/* la déf */
});

Cela dit, il risque d'y avoir un problème si l'on définit la fonction
loadAll dans plusieurs scripts. Mais je pense que ceci a une chance de
fonctionner :

--------------------------------------------------------------------------
if (! loadAll) {
function loadAll(oneMore){
if(window.onload){
var oldOnload=window.onload;
window.onload=function(){
oldOnload();
oneMore();
}
} else onload=function(){oneMore();}
}
}
loadAll(function() {
/* la déf */
});
--------------------------------------------------------------------------

(non testé encore)

--
Olivier Miakinen
Non, monsieur le juge, je vous le jure : jamais je n'ai cité
Bruxelles dans ma signature.


Avatar
delhub
Bonjour,

J'ai un petit problème avec contraintes en JavaScript, que je ne sais
pas résoudre.

L'idée est de rajouter un simple script dans plusieurs dizaines de pages
HTML en ajoutant juste une ligne :
<script type="text/javascript" src="/javascript/monscript.js"></script>

Le fichier monscript.js définit une fonction MaFonction() qui devra être
appelée lorsque la page HTML aura fini de se charger.

Simple, me direz-vous ? Oui, sauf que :
- je ne veux rien changer d'autre aux fichiers HTML ;
- certains fichiers HTML ont déjà un <body onload="AutreFonction()"> ;
- certains fichiers HTML incluent déjà un script avec une instruction
« window.onload = AutreFonction; ».

Que puis-je faire pour ajouter mon appel de fonction sans rien casser
dans ce qui existe déjà ?

j'ai déjà réalisé quelque chose de similaire dans mon site web

(http://users.skynet.be/bluffinc/ssc/chap_001.htm). J'utilise deux
fonctions javascript (MenuBegin et MenuEnd) pour aficher une entête, un
menu latéral et un pied de page. J'ai pu ainsi réunir environ 200 pages
indépendantes en ajoutant seulement 2 lignes dans le code html de
chacunes d'elles. Le script contenant les deux fonctions est à l'adresse
http://users.skynet.be/bluffinc/scripts/scripts.js.

Avatar
Olivier Miakinen
Le 03/10/2005 12:39, delhub me répondait :

[ ajouter un window.onload même s'il en existe déjà un ]

j'ai déjà réalisé quelque chose de similaire dans mon site web

(http://users.skynet.be/bluffinc/ssc/chap_001.htm). J'utilise deux
fonctions javascript (MenuBegin et MenuEnd) pour aficher une entête, un
menu latéral et un pied de page. J'ai pu ainsi réunir environ 200 pages
indépendantes en ajoutant seulement 2 lignes dans le code html de
chacunes d'elles. Le script contenant les deux fonctions est à l'adresse
http://users.skynet.be/bluffinc/scripts/scripts.js.


Merci de ta réponse, mais elle ne répond pas du tout à ma question...
D'ailleurs ton script n'a strictement aucun window.onload, et tout
ton code JavaScript est exécuté *avant* que la page n'ait fini de se
charger.

Au passage, je te signale que tes liens « Page précédente » et
« Page suivante » ne fonctionnent pas comme on pourrait s'y attendre,
c'est-à-dire en envoyant du chapitre N au chapitre N-1 ou N+1. Au
lieu de cela, ils font doublon avec les boutons Back et Forward du
navigateur.


Cordialement,
--
Olivier Miakinen
Non, monsieur le juge, je vous le jure : jamais je n'ai cité
Bruxelles dans ma signature.