JavaScript가 Ace 편집기의 소스가있는 iframe에서 작동하지 않습니다.

저는 코드 아카데미에서와 같은 일부 HTML5 대화식 학습 프로젝트를 만들었습니다. 그래서 지금 나는 내 페이지에 에이스 편집자가 있고 나는 편집기에서 사용자 유형을 원할 때마다 결과가 동일한 페이지에있는 iframe에 표시됩니다. 지금은 사용자가 html과 css 코드를 입력 할 때마다 결과가 iframe에 동기식으로 표시됩니다. 하지만 문제는 자바 스크립트가 필요한 색상으로 채워진 캔버스를 만들려고합니다. w3shcool에서 캔버스 자습서의 코드를 복사하고 캔버스가 나타나지만 색상이없는 것으로 나타납니다. 여기까지 내 코드가 있습니다. 여기 JavaScript가 Ace 편집기의 소스가있는 iframe에서 작동하지 않습니다.

내가 iframe이에 에이스 편집기의 값을 넣어 사용하는 스크립트입니다 :

<script> 
    var editor = ace.edit("editor"); 
    editor.setTheme("ace/theme/twilight"); 
    editor.getSession().setMode("ace/mode/html"); 

    editor.getSession().on('change', function(e) { 
    var x = editor.getValue(); 
    var iFrame = document.getElementById('myframe'); 
    var iFrameBody; 
    if (iFrame.contentDocument) 
    { // FF 
     iFrameBody = iFrame.contentDocument.getElementsByTagName('html')[0]; 
    } 
    else if (iFrame.contentWindow) 
    { // IE 
     iFrameBody = iFrame.contentWindow.document.getElementsByTagName('html')[0]; 
    } 
     iFrameBody.innerHTML = x; 
    }); 

$("button").click(function(){ 

}); 
    </script>

을 그리고 여기에 HTML 내 iframe 태그입니다 :

<iframe id="myframe" name="listenMsg" frameborder="0" src=""> 

</iframe>

을 그리고 여기 내가 입고 캔버스 스크립트입니다 에이스 편집기 :

<!DOCTYPE html> 
<html> 
<body> 

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> 
Your browser does not support the HTML5 canvas tag.</canvas> 

    <script> 

    var c=document.getElementById("myCanvas"); 
    var ctx=c.getContext("2d"); 
    ctx.font="30px Arial"; 
    ctx.fillText("Hello World",10,50); 

    </script> 

    </body> 
    </html>

당신의 도움을 주시면 감사하겠습니다

출처

2014-01-30 johnnycorleone

어떤 코드가 작동하지 않습니까? 오류가 발생했습니다. –

캔버스를 채우는 데 사용하는 자바 스크립트가 작동하지 않습니다. 따라서 캔버스는 아무런 색으로 나타나지 않습니다. – johnnycorleone

innerHTML을 설정할 때 스크립트가 평가되지 않으므로 편집기의 내용을 iframe의 소스로 사용하여 데이터 URL을 설정해야합니다. 또는 요소를 찾거나 스크립트하고 각각에 iFrame.contentWindow.eval(script.textContent)으로 전화하십시오.

또한 jsbin 소스 코드를보십시오 https://github.com/jsbin/jsbin

출처

2014-01-31 12:05:23

그리고 CDN에서 Ace를로드하는 경우 CORS 헤더를 추가해야합니다. – lucifurious

JavaScript가 Ace 편집기의 소스가있는 iframe에서 작동하지 않습니다.

답변

관련 문제