Comment intégrer dynamiquement du code javascript dans le code HTML

Question

Nous avons une exigence, où un javascript doit être rendu dynamiquement lorsque la page HTML est rendue. La fonction javascript pourrait être utilisée pour dessiner un cercle ou un triangle ou un carré. En supposant que l'extrait de code suivant est stocké dans un certain champ dans la base de données, comment pouvez-vous incorporer ce code directement dans HTML à un certain emplacement.

<script src="../js/processing.js"></script> 
<script src="../js/shapes.js"></script> 

<div style="clear:both;"/> 
<canvas id="canvas1" width="200" height="200"></canvas> 

<script id="script1" type="text/javascript"> 
var sketch = new Processing.Sketch(); 
sketch.attachFunction = function(processing) { 
processing.setup = setup(processing); 
processing.draw = drawCircle(processing); 
}; 

var canvas = document.getElementById("canvas1"); 
var p = new Processing(canvas, sketch); 
</script> 

Answer 1

Ceci est assez facile en utilisant AJAX. Obtenez l'extrait de script en utilisant AJAX, puis placez-le dans une balise de script dans votre corps, il devrait exécuter :).

Answer 2

Oui, cela peut facilement être fait, mais varie selon la technologie du serveur.

comme dans Ruby on Rails:

supposons que votre script est stocké dans une variable rubis dire js_script comme

js_script = 'var sketch = new Processing.Sketch(); 
sketch.attachFunction = function(processing) { 
processing.setup = setup(processing); 
processing.draw = drawCircle(processing); 
}; 

var canvas = document.getElementById("canvas1"); 
var p = new Processing(canvas, sketch);' 

code suivant fonctionnera dans votre fichier HTML

<script id="script1" type="text/javascript"> 


<%= js_script -%> # here the magic happens, it replaced this block with js_script 


</script> 

Note : Pour exécuter correctement le script dynamique, vous devez charger tous les éléments et fichiers js requis avant de l'appeler.

Comme dans votre cas, vous devriez l'appeler après avoir créé l'élément de canvas1, car il est nécessaire dans votre script