Question

在尝试将JavaScript代码嵌入我的网页（托管在Google协作平台中）时，我得到了：

Failed to load external url

或者这个：

enter image description here

JavaScript文件托管在我的网页中（在MyCabbinet部分中）：

https://sites.google.com/site/bestbookreviewever/mycabinet/modernizr-2.0.6.js

但我仍然得到相同的结果，即使它存在于我的页面上。

代码：

<!doctype html>
<html lang="en">

<head>
<meta charset="UTF-8">

<style type="text/css">
 h4 {font-family: sans-serif;}
 p {font-family: sans-serif;}
 a {font-family: sans-serif; color:#d15423; text-decoration:none;}
</style>


<title>HTML5 Canvas Example - Simple Dragging Objects</title>

<script src="https://sites.google.com/site/bestbookreviewever/mycabinet/modernizr-2.0.6.js"></script>

<script type="text/javascript">

//JavaScript HTML5 Canvas example by Dan Gries, rectangleworld.com.
//The basic setup here, including the debugging code and window load listener, is copied from 'HTML5 Canvas' by Fulton & Fulton.
//Checking for browser compatibility is accomplished with the Modernizr JavaScript library.
//The latest version of the library is available at www.modernizr.com.

//The code below establishes a way to send debug messages to the browser JavaScript Console, 
//but in such a way as to ignore errors when the browser doesn't support the JavaScript Console.
//To log a messages to the console within this code, insert into the code:
//Debugger.log("my message");
window.addEventListener("load", windowLoadHandler, false);
var Debugger = function() { };
Debugger.log = function(message) {
 try {
  console.log(message);
 }
 catch (exception) {
  return;
 }
}

function windowLoadHandler() {
 canvasApp();
}

function canvasSupport() {
 return Modernizr.canvas;
}

function canvasApp() {
 if (!canvasSupport()) {
  return;
 }

 var theCanvas = document.getElementById("canvasOne");
 var context = theCanvas.getContext("2d");

 init();

 var numShapes;
 var shapes;
 var dragIndex;
 var dragging;
 var mouseX;
 var mouseY;
 var dragHoldX;
 var dragHoldY;

 function init() {
  numShapes = 10;
  shapes = [];

  makeShapes();

  drawScreen();

  theCanvas.addEventListener("mousedown", mouseDownListener, false);
 }

 function makeShapes() {
  var i;
  var tempX;
  var tempY;
  var tempRad;
  var tempR;
  var tempG;
  var tempB;
  var tempColor;
  for (i=0; i < numShapes; i++) {
   tempRad = 10 + Math.floor(Math.random()*25);
   tempX = Math.random()*(theCanvas.width - tempRad);
   tempY = Math.random()*(theCanvas.height - tempRad);
   tempR = Math.floor(Math.random()*255);
   tempG = Math.floor(Math.random()*255);
   tempB = Math.floor(Math.random()*255);
   tempColor = "rgb(" + tempR + "," + tempG + "," + tempB +")";
   tempShape = {x:tempX, y:tempY, rad:tempRad, color:tempColor};
   shapes.push(tempShape);
  }
 }

 function mouseDownListener(evt) {
  var i;
  //We are going to pay attention to the layering order of the objects so that if a mouse down occurs over more than object,
  //only the topmost one will be dragged.
  var highestIndex = -1;

  //getting mouse position correctly, being mindful of resizing that may have occured in the browser:
  var bRect = theCanvas.getBoundingClientRect();
  mouseX = (evt.clientX - bRect.left)*(theCanvas.width/bRect.width);
  mouseY = (evt.clientY - bRect.top)*(theCanvas.height/bRect.height);

  //find which shape was clicked
  for (i=0; i < numShapes; i++) {
   if (hitTest(shapes[i], mouseX, mouseY)) {
    dragging = true;
    if (i > highestIndex) {
     //We will pay attention to the point on the object where the mouse is "holding" the object:
     dragHoldX = mouseX - shapes[i].x;
     dragHoldY = mouseY - shapes[i].y;
     highestIndex = i;
     dragIndex = i;
    }
   }
  }

  if (dragging) {
   window.addEventListener("mousemove", mouseMoveListener, false);
  }
  theCanvas.removeEventListener("mousedown", mouseDownListener, false);
  window.addEventListener("mouseup", mouseUpListener, false);

  //code below prevents the mouse down from having an effect on the main browser window:
  if (evt.preventDefault) {
   evt.preventDefault();
  } //standard
  else if (evt.returnValue) {
   evt.returnValue = false;
  } //older IE
  return false;
 }

 function mouseUpListener(evt) {
  theCanvas.addEventListener("mousedown", mouseDownListener, false);
  window.removeEventListener("mouseup", mouseUpListener, false);
  if (dragging) {
   dragging = false;
   window.removeEventListener("mousemove", mouseMoveListener, false);
  }
 }

 function mouseMoveListener(evt) {
  var posX;
  var posY;
  var shapeRad = shapes[dragIndex].rad;
  var minX = shapeRad;
  var maxX = theCanvas.width - shapeRad;
  var minY = shapeRad;
  var maxY = theCanvas.height - shapeRad;
  //getting mouse position correctly 
  var bRect = theCanvas.getBoundingClientRect();
  mouseX = (evt.clientX - bRect.left)*(theCanvas.width/bRect.width);
  mouseY = (evt.clientY - bRect.top)*(theCanvas.height/bRect.height);

  //clamp x and y positions to prevent object from dragging outside of canvas
  posX = mouseX - dragHoldX;
  posX = (posX < minX) ? minX : ((posX > maxX) ? maxX : posX);
  posY = mouseY - dragHoldY;
  posY = (posY < minY) ? minY : ((posY > maxY) ? maxY : posY);

  shapes[dragIndex].x = posX;
  shapes[dragIndex].y = posY;

  drawScreen();
 }

 function hitTest(shape,mx,my) {

  var dx;
  var dy;
  dx = mx - shape.x;
  dy = my - shape.y;

  //a "hit" will be registered if the distance away from the center is less than the radius of the circular object  
  return (dx*dx + dy*dy < shape.rad*shape.rad);
 }

 function drawShapes() {
  var i;
  for (i=0; i < numShapes; i++) {
   context.fillStyle = shapes[i].color;
   context.beginPath();
   context.arc(shapes[i].x, shapes[i].y, shapes[i].rad, 0, 2*Math.PI, false);
   context.closePath();
   context.fill();
  }
 }

 function drawScreen() {
  //bg
  context.fillStyle = "#000000";
  context.fillRect(0,0,theCanvas.width,theCanvas.height);

  drawShapes();  
 }

}

</script>

</head>
<body>
<div style="top: 50px; text-align:center">
<h4>A Simple HTML5 Canvas Example - Dragging Objects</h4>
<canvas id="canvasOne" width="500" height="300">
Your browser does not support HTML5 canvas.
</canvas>
<p>Drag the circles with the mouse.</p>
<p><a href="http://www.rectangleworld.com">rectangleworld.com</a></p>
</div>
</body>
</html>

知道怎么解决这个问题吗？

Answer 1

尝试转到url，您会看到文件内容不显示，这就是问题所在。仅使用http:// serving up个文件进行下载，而不是text/javascript

在其他地方托管文件？我对谷歌网站并不是很熟悉，但我确实发现了这一点：productforums.google.com/forum/#!topic/sites/-dei7Nm5o6o不知道它对你有什么价值。

无法在Google网站中加载外部网址

1 个答案: