서버에 올려 놓았을 때 JavaScript가 작동하지 않음

서버에 넣지 않고 PC의 일부에서 실행하면 완벽하게 작동하지만 서버에 놓으면 호출한다는 코드가 있습니다.서버에 올려 놓았을 때 JavaScript가 작동하지 않음

catch되지 않은 ReferenceError가 : crearLienzo가에서 온로드 을 정의되지 않은 ((인덱스) : 81)

이런 일이 발생하는 이유 이해가 안가, 그것은 나에게 다음과 같은 오류를 제공합니다. 다들 감사 해요!

<html> 
<head> 
<script type="text/javascript" src="jquery-3.2.1.min.js"></script> 
<script type="text/javascript" > 
    var movimientos = new Array(); 
    var pulsado; 
    function crearLienzo() { 
    var canvasDiv = document.getElementById('lienzo'); 
canvas = document.createElement('canvas'); 
canvas.setAttribute('width', 200); 
canvas.setAttribute('height', 200); 
canvas.setAttribute('id', 'canvas'); 
canvasDiv.appendChild(canvas); 
if(typeof G_vmlCanvasManager != 'undefined') { 
    canvas = G_vmlCanvasManager.initElement(canvas); 
} 
context = canvas.getContext("2d"); 

    $('#canvas').mousedown(function(e){ 
     pulsado = true; 
     movimientos.push([e.pageX - this.offsetLeft, 
      e.pageY - this.offsetTop, 
      false]); 
     repinta(); 
    }); 

    $('#canvas').mousemove(function(e){ 
     if(pulsado){ 
      movimientos.push([e.pageX - this.offsetLeft, 
       e.pageY - this.offsetTop, 
       true]); 
     repinta(); 
     } 
    }); 

    $('#canvas').mouseup(function(e){ 
     pulsado = false; 
    }); 

    $('#canvas').mouseleave(function(e){ 
     pulsado = false; 
    }); 
    repinta(); 

} 


    function repinta() { 
     // función para dibujar en el lienzo los movimientos del ratón que hemos 
     // recogido en la variable "movimientos" 
     canvas.width = canvas.width; // Limpia el lienzo 

    context.strokeStyle = "#0000a0"; 
    context.lineJoin = "round"; 
    context.lineWidth = 6; 

    for(var i=0; i < movimientos.length; i++) 
    {  
    context.beginPath(); 
    if(movimientos[i][2] && i){ 
     context.moveTo(movimientos[i-1][0], movimientos[i-1][1]); 
    }else{ 
     context.moveTo(movimientos[i][0], movimientos[i][1]); 
    } 
    context.lineTo(movimientos[i][0], movimientos[i][1]); 
    context.closePath(); 
    context.stroke(); 
    } 
} 
function convertCanvasToImage(canvas) { 
       var image = new Image(); 
       image.src = canvas[0].toDataURL("image/png"); 
     alert(image); 
       return image; 
} 
</script> 
</head> 
<body style="background: #eee;" onload="crearLienzo()"> 
<div id="lienzo" style="width: 200px; height: 200px; background: #fff;"></div> 
<button type="button" onclick="convertCanvasToImage($('#canvas'));">aa</button> 

</body> 
</html>

출처

2017-12-06 alberto

어떤 브라우저를 사용하십니까? 어떤 서버? 서버 리소스를 참조하기 때문에 webapp에 jquery가 포함되어 있습니까? 코드에 오타가 있습니다 (예 :'getElemenatById'). 정말 효과가 있습니까? jQuery를 사용하는 경우 맨손으로 DOM 조작 함수 (getElementById)를 사용하는 이유는 무엇입니까? 왜 jsfiddle과 같은 웹 기반 도구에서 직접 빌드하지 않는 것입니까? (코드에서 다른 오류가 하나 나타납니다)? – andy

는 googleapis 라이브러리에서 처음

<html> 
    <head> 
    <script type="text/javascript" src="jquery-3.2.1.min.js"></script> 

    </head> 
    <body style="background: #eee;" onload="crearLienzo()"> 
<script type="text/javascript" > 
     var movimientos = new Array(); 
     var pulsado; 
     function crearLienzo() { 
     var canvasDiv = document.getElementById('lienzo'); 
    canvas = document.createElement('canvas'); 
    canvas.setAttribute('width', 200); 
    canvas.setAttribute('height', 200); 
    canvas.setAttribute('id', 'canvas'); 
    canvasDiv.appendChild(canvas); 
    if(typeof G_vmlCanvasManager != 'undefined') { 
     canvas = G_vmlCanvasManager.initElement(canvas); 
    } 
    context = canvas.getContext("2d"); 

     $('#canvas').mousedown(function(e){ 
      pulsado = true; 
      movimientos.push([e.pageX - this.offsetLeft, 
       e.pageY - this.offsetTop, 
       false]); 
      repinta(); 
     }); 

     $('#canvas').mousemove(function(e){ 
      if(pulsado){ 
       movimientos.push([e.pageX - this.offsetLeft, 
        e.pageY - this.offsetTop, 
        true]); 
      repinta(); 
      } 
     }); 

     $('#canvas').mouseup(function(e){ 
      pulsado = false; 
     }); 

     $('#canvas').mouseleave(function(e){ 
      pulsado = false; 
     }); 
     repinta(); 

    } 


     function repinta() { 
      // función para dibujar en el lienzo los movimientos del ratón que hemos 
      // recogido en la variable "movimientos" 
      canvas.width = canvas.width; // Limpia el lienzo 

     context.strokeStyle = "#0000a0"; 
     context.lineJoin = "round"; 
     context.lineWidth = 6; 

     for(var i=0; i < movimientos.length; i++) 
     {  
     context.beginPath(); 
     if(movimientos[i][2] && i){ 
      context.moveTo(movimientos[i-1][0], movimientos[i-1][1]); 
     }else{ 
      context.moveTo(movimientos[i][0], movimientos[i][1]); 
     } 
     context.lineTo(movimientos[i][0], movimientos[i][1]); 
     context.closePath(); 
     context.stroke(); 
     } 
    } 
    function convertCanvasToImage(canvas) { 
      var image = new Image(); 
      image.src = canvas[0].toDataURL("image/png"); 
      alert(image); 
      return image; 
    } 
    </script> 
    <div id="lienzo" style="width: 200px; height: 200px; background: #fff;"></div> 
    <button type="button" onclick="convertCanvasToImage($('#canvas'));">aa</button> 

    </body> 
    </html>

출처

2017-12-06 13:21:30

"스크립트 태그를 본체에 넣고 먼저로드하십시오"- 머리 대신 본문에 넣으면 ** 나중에로드됩니다 **. 이 문제가 어떻게 해결됩니까? – Quentin

내가 게시 한 답변에 대해이 코드를 실행하여 솔루션을 얻었습니다.하지만 진술에 대해 사과드립니다. \t "스크립트 태그를 본체에 넣고 먼저로드하십시오." –

대단히 감사합니다! 그것은 당신의 솔루션과 완벽하게 작동합니다! – alberto

-1

사용 jQuery 라이브러리를로드하기 위해 신체 내부에 스크립트 태그를 넣습니다. body 태그의 끝 앞에 스크립트 태그를 포함하십시오.

<html> 
<head> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
</head> 
<body style="background: #eee;" onload="crearLienzo()"> 
<div id="lienzo" style="width: 200px; height: 200px; background: #fff;"></div> 
<button type="button" onclick="convertCanvasToImage($('#canvas'));">aa</button> 
<script type="text/javascript" > 
    var movimientos = new Array(); 
    var pulsado; 
    function crearLienzo() { alert('hea'); 
    var canvasDiv = document.getElementById('lienzo'); 
canvas = document.createElement('canvas'); 
canvas.setAttribute('width', 200); 
canvas.setAttribute('height', 200); 
canvas.setAttribute('id', 'canvas'); 
canvasDiv.appendChild(canvas); 
if(typeof G_vmlCanvasManager != 'undefined') { 
    canvas = G_vmlCanvasManager.initElement(canvas); 
} 
context = canvas.getContext("2d"); 

    $('#canvas').mousedown(function(e){ 
     pulsado = true; 
     movimientos.push([e.pageX - this.offsetLeft, 
      e.pageY - this.offsetTop, 
      false]); 
     repinta(); 
    }); 

    $('#canvas').mousemove(function(e){ 
     if(pulsado){ 
      movimientos.push([e.pageX - this.offsetLeft, 
       e.pageY - this.offsetTop, 
       true]); 
     repinta(); 
     } 
    }); 

    $('#canvas').mouseup(function(e){ 
     pulsado = false; 
    }); 

    $('#canvas').mouseleave(function(e){ 
     pulsado = false; 
    }); 
    repinta(); 

} 


    function repinta() { 
     // función para dibujar en el lienzo los movimientos del ratón que hemos 
     // recogido en la variable "movimientos" 
     canvas.width = canvas.width; // Limpia el lienzo 

    context.strokeStyle = "#0000a0"; 
    context.lineJoin = "round"; 
    context.lineWidth = 6; 

    for(var i=0; i < movimientos.length; i++) 
    {  
    context.beginPath(); 
    if(movimientos[i][2] && i){ 
     context.moveTo(movimientos[i-1][0], movimientos[i-1][1]); 
    }else{ 
     context.moveTo(movimientos[i][0], movimientos[i][1]); 
    } 
    context.lineTo(movimientos[i][0], movimientos[i][1]); 
    context.closePath(); 
    context.stroke(); 
    } 
} 
function convertCanvasToImage(canvas) { 
     var image = new Image(); 
     image.src = canvas[0].toDataURL("image/png"); 
     alert(image); 
     return image; 
} 
</script> 

</body> 
</html>

이렇게하면 어디에서나 작동합니다. 또한 script 태그는 body 태그의 끝에 포함되어 있으므로 모든 css 및 이미지 파일이로드 된 후로드됩니다.

출처

2017-12-06 13:42:38 Optimizer

"googleapis 라이브러리에서 jQuery 라이브러리 사용"- 이유가 무엇입니까? 질문은 오류 메시지가'$'가 아닌'crearLienzo'에 관한 것이라고 말합니다 – Quentin

코드를 디버깅 할 때 서버의 body 태그의 끝 앞에 포함되어 있으면 함수 (crearLienzo)가 완벽하게 호출됩니다. 게다가 jquery 라이브러리를 다운로드하여 서버에로드하는 것은 나쁜 습관이다. 반드시 Hosted Libraries에서로드해야합니다. – Optimizer

서버에 올려 놓았을 때 JavaScript가 작동하지 않음

답변

관련 문제