2
在嘗試嵌入JavaScript代碼到我的網頁（在谷歌網站上託管），我得到：無法加載外部鏈接在谷歌網站
Failed to load external url
或者這樣：
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>
任何想法如何解決這一問題？
試着去那個'url'，你會看到文件內容不顯示，這是問題所在。只用'http：//'它提供文件下載，而不是'text/javascript'文件 –
@NickR：啊哈，明白了。任何方式在這個？ – ron
在其他地方託管文件？我並不十分熟悉Google協作平臺，但我的確發現了這一點：http://productforums.google.com/forum/#!topic/sites/-dei7Nm5o6o不知道它是否對您有任何價值。 –