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.

Insertion d'un script dans un page

JavaScript

Vue hybride

Discussions similaires

Partager

Partager