title: Failed to load external url in Google sites
body: <p>While trying to embed a JavaScript code to my webpage (hosted in Google Sites) , I get : </p>
  
  <pre><code>Failed to load external url
  </code></pre>
  
  <p>Or this : </p>
  
  <p><img src="https://i.stack.imgur.com/y33Dr.gif" alt="enter image description here"></p>
  
  <p>The JavaScript file is hosted in my webpage (in the MyCabbinet section) : </p>
  
  <pre><code>https://sites.google.com/site/bestbookreviewever/mycabinet/modernizr-2.0.6.js
  </code></pre>
  
  <p>but I keep getting the same result, even though it exists on my page . </p>
  
  <p>The code : </p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  
  &lt;style type="text/css"&gt;
   h4 {font-family: sans-serif;}
   p {font-family: sans-serif;}
   a {font-family: sans-serif; color:#d15423; text-decoration:none;}
  &lt;/style&gt;
  
  
  &lt;title&gt;HTML5 Canvas Example - Simple Dragging Objects&lt;/title&gt;
  
  &lt;script src="https://sites.google.com/site/bestbookreviewever/mycabinet/modernizr-2.0.6.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  
  //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 &amp; 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 &lt; 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 &lt; numShapes; i++) {
     if (hitTest(shapes[i], mouseX, mouseY)) {
      dragging = true;
      if (i &gt; 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 &lt; minX) ? minX : ((posX &gt; maxX) ? maxX : posX);
    posY = mouseY - dragHoldY;
    posY = (posY &lt; minY) ? minY : ((posY &gt; 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 &lt; shape.rad*shape.rad);
   }
  
   function drawShapes() {
    var i;
    for (i=0; i &lt; 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();  
   }
  
  }
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div style="top: 50px; text-align:center"&gt;
  &lt;h4&gt;A Simple HTML5 Canvas Example - Dragging Objects&lt;/h4&gt;
  &lt;canvas id="canvasOne" width="500" height="300"&gt;
  Your browser does not support HTML5 canvas.
  &lt;/canvas&gt;
  &lt;p&gt;Drag the circles with the mouse.&lt;/p&gt;
  &lt;p&gt;&lt;a href="http://www.rectangleworld.com"&gt;rectangleworld.com&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any idea how to fix this ? </p>