Insertion d'un script dans un page

**xounet** · 28/05/2014, 21h14

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**SylvainPV** · 28/05/2014, 21h59

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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é");
});

**xounet** · 28/05/2014, 23h36

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.

**SylvainPV** · 29/05/2014, 03h24

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>.

**xounet** · 29/05/2014, 08h44

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.

**SylvainPV** · 30/05/2014, 03h06

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.

**xounet** · 30/05/2014, 08h26

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

src.value=".$script_javascript;

est ce possible ?

**SylvainPV** · 30/05/2014, 13h32

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.

**vinceom92** · 30/05/2014, 22h20

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

Sinon, pourquoi ne pas faire des echo de ton script javascript ?

**xounet** · 31/05/2014, 00h09

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.

**SylvainPV** · 31/05/2014, 01h17

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

**Bovino** · 02/06/2014, 09h00

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>.

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 ?

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é.

**SylvainPV** · 02/06/2014, 10h26

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

**Bovino** · 02/06/2014, 10h39

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

Insertion d'un script dans un page

JavaScript

Discussions similaires

Partager

Partager