クローンがオリジナルと全く同じなんてダレが言った?-JavaScript覚書

Ads/Widgets:
サイト情報:
QLOOKアクセス解析
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
最近ちょっとjavascriptとかDOMとかGoogleのAJAX APIとかの知恵がついてきたので、スライドショーなんて自分で作れるんじゃないか?と思ってこちょこちょコードを作っていたら、FireFoxだけうまく動かなくてハマってしまった。 ChromeとOperaとIEは同じ動きをするが、FireFoxだけ違う。(←うちのパソコンに入っているブラウザのすべて)

具体的には、

  img = document.craeteElement('img');
  img.src = 'http://hogehoge';
とかして作っておいたエレメントを別の場所に表示したいので、画像のロードが終了した後で
  newImg = img.cloneNode(true);
てな感じでコピー。

んで、コピーしたエレメントをそのサイズを元に微調整して表示するためにこんな感じのコードを記述。 (一回テンポラリにコピーしてあること自体にはあんまり意味はない)

  var w = newImg.width * スケールファクタ;
  newImg.width = w;

んで次に、コピーしたエレメントを画面に表示するために、画面上のノードの子ノードとして接続。

   element.appendChild(newImg);

…が、そうやってサイズを細工すると、表示したつもりになっていても、FireFoxのウィンドウには予定の画像が表示されてない、と。

なぜか。結論から書くと、下記のコードでノードをコピーしたあと、FireFoxではコピーしたエレメントのwidthとheightには0が入っていて、計算の結果、面積0のimgノードになってしまっているからだ。(結論だけ書くと短いけど、この結論に至るまでに一晩使った…まあデバッグなんていつもそんなもんだけど)

  newImg = img.cloneNode(true);

サイズの細工をしなければクローンの画像もちゃんと表示されるところをみると、一旦画面上のノードに表示されると元の画像サイズを認識して正しく処理するんじゃないかという気がする。(けどもう気力尽きたのでそこまで検証しない)

引数にtrueを指定しておけば、いろいろ丸ごとコピーしてくれるんだ、と思いこんでいたけど、この引数はあくまでも「子ノードをコピーする」という指定なわけで、他の属性をコピーすることにはなってませんね、確かに。 属性がコピーされないのなら、迂闊に使えない残念な機能とラベルを貼っておいて注意するのだけど、迂闊に使えてしまう環境があるからこうやってハマるわけで、別にどっちが正しくてもいいので挙動は同じにしてくれ。。orz

なんとなく少し重そうな先入観があったり、自力で枠組みを飲み込むのに時間がかかりそうだったりするので試してみたことないけど、jQueryとかprototypeとかYUIとか、そんなライブラリは、こういうブラウザ依存を回避するための手段でもあるわけですね、きっと。

一応ソコソコ動くようなコードになったけど、手持ちにないブラウザだとどういう挙動をするかは何とも… ちゃんとやるならWEBばっかりで調べてないで、それなりの文献とかも読んだほうがいいのかなあ。 本職のWEBプログラマもこういう綱渡りの連続なのかしらん。

なにか一つ書籍をおさえて置くとしたらこれあたりかな。。オライリー・ジャパンの表紙を見ると、硬派な本物に違いないとか思ってしまうのは、それ自体がちと軟弱??
JavaScript 第5版JavaScript 第5版
(2007/08/14)
David Flanagan

商品詳細を見る
内容紹介
言語解説部分とリファレンス部分に分け、その言語解説部分をまとめたもの。第5版では、全章の内容を更新し、XMLHTTPRequestオブジェクトでスクリプトからHTTPリクエストに送信する方法、JavaScriptを使ってXMLデータの制御、またJavaScriptによるグラフィックの制御機能についてなど、新しい話題を追加した。

この記事へのコメント
URL:
Comment:
Pass:
秘密: 管理者にだけ表示を許可する
 
この記事のトラックバックURL
http://arakiba.blog62.fc2.com/tb.php/263-15a2263d
この記事にトラックバックする(FC2ブログユーザー)
この記事へのトラックバック

 Copyright © アラキバ All rights reserved. 

 / Template by 無料ブログ テンプレート カスタマイズ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。