2010-11-25 10 views
0

HTML 페이지가 렌더링 될 때 javascript를 동적으로 렌더링해야하는 요구 사항이 있습니다. javascript 함수를 사용하여 원이나 삼각형 또는 사각형을 그릴 수 있습니다. 다음 코드 스 니펫이 데이터베이스의 특정 필드에 저장된다고 가정하면 이러한 코드를 어떻게 특정 위치의 HTML에 직접 포함시킬 수 있습니다.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> 
+0

스크립트에 필요하기 때문에 canvas1 요소를 생성 한 후 호출해야합니까? 서버가 페이지를 작성하거나 클라이언트가 비동기 포스트 백을 수행하여 스크립트를 가져 와서 실행하려고 할 때 스크립트를 삽입하고 싶습니까? –

+0

서버가 비동기 포스트 백이 아닌 페이지를 작성할 때 발생합니다. – user339108

답변

0

이것은 AJAX를 사용하여 매우 쉽습니다. AJAX를 사용하여 스크립트 스 니펫을 얻은 다음 본문의 스크립트 태그에 배치합니다. 실행해야합니다 :).

0

예, 쉽게 수행 할 수 있지만 방법은 서버 기술에 따라 다릅니다. 루비 온 레일즈와 같은

:

이 스크립트를 가정하자 일부 루비 변수에 저장하여 HTML 파일

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


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


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

로 js_script 말 : 동적 스크립트를 제대로 실행하려면 호출하기 전에 필요한 모든 요소와 js 파일을로드해야합니다. 귀하의 경우처럼

당신이 사용중인 서버 플랫폼

관련 문제