Question

我们有一个要求，即在呈现HTML页面时需要动态呈现javascript。 javascript函数可用于绘制圆形或三角形或正方形。假设以下代码段存储在数据库的某个字段中，如何将这些代码直接嵌入到某个位置的HTML中。

<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

使用AJAX非常容易。使用AJAX获取脚本片段，然后将其放在您体内的脚本标签中，它应该执行：）。

Answer 2

是的，这可以轻松完成，但方式因服务器技术而异。

就像在Ruby on Rails中一样：

假设你的脚本存储在一些ruby变量中，比如说js_script

 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);'

以下代码适用于您的HTML文件

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


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


</script>

注意：为了正确执行动态脚本，您应该在调用之前加载所有必需的元素和js文件。

与你的情况类似，你应该在创建canvas1元素后调用它，因为它在脚本中是必需的

如何将JavaScript代码动态嵌入到HTML中

2 个答案: