Файл Javascript (excanvas) не работает, когда я загружаю его внизу страницы

Это работает:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

  <script src="/js/msgv/widgets/excanvas2.js" type="text/javascript"></script>
  <script type="text/javascript" charset="utf-8">
    function canvasTest(){
      console.log("beginning canvasTest");
      var b_canvas = document.getElementById("regularCanvas");
      var b_context = b_canvas.getContext("2d");
      b_context.fillRect(50, 25, 150, 100);
    }
  </script>

</head>

<body onLoad="canvasTest()">
    <canvas id="regularCanvas" style="border: 1px dotted; float: left;" class="clear" height="225" width="300"></canvas>
</body>
</html>

Это не:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

Единственная разница между ними заключается в том, где я загружаю его на странице. Все работает нормально, когда я загружаю excanvas в голову. Я получаю сообщение об ошибке, когда я загружаю его в нижней части тела.

  <script type="text/javascript" charset="utf-8">
    function canvasTest(){
      console.log("beginning canvasTest");
      var b_canvas = document.getElementById("regularCanvas");
      var b_context = b_canvas.getContext("2d");
      b_context.fillRect(50, 25, 150, 100);
    }
  </script>

</head>

<body onLoad="canvasTest()">
    <canvas id="regularCanvas" style="border: 1px dotted; float: left;" class="clear" height="225" width="300"></canvas>
  <script src="/js/msgv/widgets/excanvas2.js" type="text/javascript"></script>
</body>
</html>

person morgancodes    schedule 18.06.2010    source источник


Ответы (2)


RTFM:

Файл excanvas.js должен быть включен на страницу до любых вхождений элементов холста в разметку. Это связано с ограничениями в IE, и нам нужно творить чудеса, прежде чем IE увидит любой экземпляр в разметке. Рекомендуется поставить его в голову.

person Ryley    schedule 18.06.2010
comment
РТФМ точно! С благодарностью, Райли. - person morgancodes; 19.06.2010

Если вы хотите загружать excanvas асинхронно/условно, это возможно: https://stackoverflow.com/a/18520897/541023< /а>

person Tyler    schedule 29.08.2013