[英]JavaScript does not work when I put it on the server
我有一個代碼，當我從PC的任何部分運行它而不將其放置在服務器上時，它都能正常工作，但是當我將其放置在服務器上並調用它時，它給了我以下錯誤：
未被捕獲的ReferenceError：在加載時未定義crearLienzo（（index）：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>
將您的腳本標簽放入體內以首先加載
<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>
使用googleapis庫中的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>
這樣，它將隨處可見。 另外，由於腳本標簽包含在body標簽的末尾，因此它將在所有css和圖像文件加載后加載。
為什么我的代碼只能在html中工作，而在將其放入Javascript頁面時卻不能工作？
[英]Why does my code only works in html but does not work when I put it into a Javascript page?
當我將PrimeFaces.locales設置放在單獨的javascript文件中時，PrimeFaces語言環境無法正常工作
[英]PrimeFaces locales does not work well when i put PrimeFaces.locales setting in a separate javascript file
放在服務器上時未檢索到JSON，但使用XAMPP可以在Localhost上工作
[英]JSON is not Retrieved When Put on the Server but Does Work on Localhost using XAMPP
為什么此 JavaScript 代碼僅在我在 HTTP 服務器上運行時才有效？
[英]Why does this JavaScript code only work when I run it on a HTTP server?
當我將腳本放在母版頁的腳本文件中時，jQuery手風琴不起作用，但是當我將其直接放在頁上時，它起作用
[英]Jquery accordion does not work when I put the script in script file on a master page, but it does when I put it directly on the page
我使用GIMP和mtPaint調整了大小，但是它不起作用。 幻燈片放映時圖像尺寸不會改變
[英]I resized with GIMP and mtPaint, it does not work. The image size does not change when I put it slideshow
當我嘗試使用Javascript OOP樣式進行編碼時，Append無法正常工作
[英]Append does not work when I try to code in Javascript OOP style
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.