Insertion d'un script dans un page

Version imprimable

28/05/2014, 21h14
xounet

Insertion d'un script dans un page
Bonjour,

Dans une page web contenant des script javascripts (dans les balises head), du php et dont le contenu change par l'intermédiaire de balises <div>, je dois ajouter de nouvelles fonctions javascript à l'intérieur d'une div en utilisant des scripts php.
ex :
Code:

1 2 3 4 5 <script> function test () { //code javascript } <script>
Apparemment cela ne marche vu les nombreux essais puisque je n'arrive à faire fonctionner les fonctions javascript que lorsque manuellement je les insère dans les balises head de ma page.
Est il possible sans ajouter de iframe de "rajouter" des fonctions écrites en javascript en dehors des balises <head>, y a t il une solution pour que ces fonctions soient reconnues par le navigateur lorsqu'elle sont déclarées dans une div ou après diverses rafraîchissement de div ?

J'ai été confronté de nombreuses fois à ce problème parfois sans connaître la source du pb, une solution serait vraiment bien venue !

merci d'avance.

Les balises <script> peuvent être placées n'importe où, mais on les trouve généralement à deux endroits :
- dans <head> pour les charger en parallèle le plus tôt possible
- à la fin de <body> pour s'assurer que le document HTML est chargé et interprété avant l'exécution du JavaScript.

Si je te comprends bien, tu veux faire de l'insertion dynamique de script, et actuellement tu fais ça en AJAX et se pose le souci de l'interprétation des balises <script> après leur insertion dans le DOM.
Il y a une méthode plus simple :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 function loadScript(src, callback) { var script = document.createElement('script'); script.src= src; if(callback && callback.call) { /*la fonction callback passée en argument facultatif sera appelée une fois le script chargé */ script.addEventListener('load', callback); } document.getElementsByTagName('head')[0].appendChild(script); } loadScript("monfichier.js", function(){ console.log("monfichier.js chargé et exécuté"); });

28/05/2014, 23h36
xounet

Bonjour,

Ta réponse à l'air intéressante et de plus elle est différente de ce que j'ai pu lire sur le web.
Peux tu expliquer le propriété src ? et le callback ?
Comment utiliser cette fonction qui doit se trouver dans le head je suppose ?

Je suis en train de travailler de mon côté sur une solution qui inclut tous les scripts dans le head avec des fonctions qui ne comporte aucune variable globale...
merci.
29/05/2014, 03h24
SylvainPV

Les trois dernières lignes du code te montrent un exemple d'utilisation.

Ce code se contente de créer une balise <script> et de l'ajouter à la fin de <head>. Le navigateur se charge du reste. L'attribut src est le même que celui que tu utilises habituellement avec la balise <script>.
29/05/2014, 08h44
xounet

Est il possible de faire la même chose en injectant directement le code javascript genre "script.src.value", car j'utilise php pour générer les scripts et le fait d'utiliser des fichiers oblige à créer des fichiers ".js" au moment de la génération de la page web par php ce qui semble un peu lourd à gérer surtout lorsqu'il existe plusieurs utilisateurs sur le site qui n'ont pas nécessairement les mêmes requêtes.

Il faut que je teste ton code.
30/05/2014, 03h06
SylvainPV

PHP travaille côté serveur, côté client cela ne fait aucune différence si PHP passe sur tes scripts ou non. Cela n'a aucune incidence.
30/05/2014, 08h26
xounet

je reformule : au lieu d'avoir à charger un fichier dans lequel se trouve le code javascript, je préfère directement afficher le code de cette façon :

Code:

src.value=".$script_javascript;

est ce possible ?
30/05/2014, 13h32
SylvainPV

Un script en inline, oui c'est possible mais à quoi bon ? Si le script est ajouté dynamiquement, on peut directement renseigner son URL. L'insérer en inline est à la fois plus compliqué et moins lisible.
30/05/2014, 22h20
vinceom92

Les scripts javascript se mettent généralement dans le <head>.

Sinon, pourquoi ne pas faire des echo de ton script javascript ?
31/05/2014, 00h09
xounet

ok.si jamais tu as un script permettant de faire la même chose inline ça serait bien.
En fait il est mieux de l'ajouter inline car mon javascript contient des variables php... donc si je passe par des fichiers .js il faut que je génère les fichiers un par un avec php ce qui n'est pas envisageable.

pour les quelques remarques je rappelle juste qu'avec echo les javascripts ne marchent pas dans le cas cité en tête de ce post.
31/05/2014, 01h17
SylvainPV

Citation:

Envoyé par xounet

si je passe par des fichiers .js il faut que je génère les fichiers un par un avec php ce qui n'est pas envisageable.

Et pourquoi ça ? ça revient à la même chose ! PHP n'a pas vocation à travailler uniquement par-dessus du HTML
02/06/2014, 09h00
Bovino

Citation:

Envoyé par SylvainPV

Ce code se contente de créer une balise <script> et de l'ajouter à la fin de <head>

Ce n'est pas la meilleure façon de faire : en effet, rien ne te garantit que la page utilisant le script contient une balise <head> qui est optionnelle en HTML.
En revanche, tu as obligatoirement une balise <script>, celle qui contient le code que tu exécutes.
Du coup, il est préférable d'ajouter la nouvelle balise avant la première balise <script>. ;)

Citation:

Envoyé par xounet

si je passe par des fichiers .js il faut que je génère les fichiers un par un avec php ce qui n'est pas envisageable

J'ai du mal à comprendre... :?
C'est envisageable de créer le code JavaScript en PHP, mais pas de générer des fichiers à la volée ? :koi:

Dans le code proposé par Sylvain, il te suffit de remplacer la source script.js par exemple en script.php et que ce script PHP renvoie du JavaScript avec le header correspondant et le tour est joué.
02/06/2014, 10h26
SylvainPV

Oui enfin c'est chercher la petite bête là quand même. Une page web sans tête, on en voit pas tous les jours ;)
02/06/2014, 10h39
Bovino
Certes, j'en conviens, mais ça semble malgré tout suffisamment répandu pour que Google décide d'utiliser cette forme pour l'intégration de ses scripts. ;)

EDIT
Pour rappel, un code tel que
Code:

1 2 3 <!doctype html> <title>Test</title> <script>alert('Hello World !');</script>
est tout à fait valide en HTML, donc si c'est valide, ça signifie que les codes génériques que l'on écrit doivent prendre en considération que des balises comme <html>, <head>, <body>, etc. peuvent ne pas être présentes sans que ce soit une erreur de codage.