11

raphael.js (ダウンロードしてローカルで実行) を HTML ファイルに読み込もうとしていますが、スクリプトは終了を拒否し、JS コンソールで次のエラーが発生します。

Uncaught TypeError: 
Cannot call method 'appendChild' of null
bV                   on raphael.js:7
a                    on raphael.js:7
(anonymous function) on raphael.html:22

これは縮小版の場合で、非縮小版の 1789 行目で同じエラーが発生します。

ウェブサイトからコードをダウンロードし、圧縮と非圧縮の両方を試し、デモの 1 つにリンクされている JS ファイルをダウンロードしました。これらはすべてブラウザ (chrome) で正常に動作します。

何かご意見は？

4

1 に答える 1

28

私は同じ問題を抱えていました、そしてそれはロードオーダーの問題であることがわかりました。元のコードは次のとおりです。

<!doctype html>
<html>
  <head>
    <script src='raphael-1.5.2.js'></script>
    <script>
        var paper = Raphael(10, 50, 300, 250);
        var circle = paper.circle(50, 40, 10);
        circle.attr('fill', '#c00');
        circle.attr('stroke', '#fff');
    </script>
  </head>

  <body></body>
</html>

が呼び出されるRaphael(10, 50, 300, 250)と、まだ存在していない本体にキャンバス要素を追加しようとしていることがわかります。したがって、それをwindow.onloadまたはjQuery onload関数でラップすると、問題が解決しました。

<!doctype html>
<html>
  <head>
    <script src='raphael-1.5.2.js'></script>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>
    <script>
      $(function () {
        var paper = Raphael(10, 50, 300, 250);
        var circle = paper.circle(50, 40, 10);
        circle.attr('fill', '#c00');
        circle.attr('stroke', '#fff');
      });
    </script>
  </head>

  <body></body>
</html>
于 2010-12-22T17:41:46.370 に答える