Hatena::ブログ(Diary)

latest log このページをアンテナに追加 RSSフィード

2011-09-12

IE10 で attachEvent が廃止された場合に備えましょう

Windows 8 には IE10 が標準搭載されます。これらは早ければ2012年の秋ごろまでにリリースされる予定です。

IE10 ではレガシーな(古い)機能やメソッドが切り捨てられると予告されています → 非推奨の DOM イベント

IE10 で attachEvent が廃止されると attachEventで IE かどうかを判別する(↓)のコードなどが魔女化するでしょう(バグになるでしょう)。

// オレオレライブラリによく見かけるコード片
var isIE = (window.attachEvent && !window.opera);

        この場合は ↓↓ これで良さげ

var isIE = !!document.uniqueID;

アドネットワークからの広告を埋め込んでいるサイトでは、同様のコードが広告生成用の JavaScript の中にも埋まっているかもしれません。そちらに対する備えも必要ですね。

2011-03-02

DOM Lv0 イベントハンドラ内で media 変数にアクセスできない

IE6〜IE9RC では、 DOM Lv0 イベントハンドラ内では media 変数にアクセスできないようです。謎です。

var media = "(ε・◇・)з はろー";


<input type="button"
    value="IEだとmedia変数が見えないよ"
    onclick="alert(media)" />
    

<input type="button"
    value="window.media変数は見えるよ"
    onclick="alert(window.media)" />

消えるmedia変数 - jsdo.it - share JavaScript, HTML5 and CSS

2010-09-05

IE8の開発者ツールのデバッグできなくなるバグをyoutubeに上げました

http://www.youtube.com/watch?v=OXzqRacGR18

# 残念ながら画質は iPhone → youtube 画質です

# 野外で取っているので、音声ぼそぼそでごめんなさい

IE8の開発者ツールが抱えたままの困ったバグ(古いjsが読み込まれ続ける, 同じファイルが多重ロードされブレークポイントが貼れない, 通常実行とステップ実行で結果が異なる)は、IE9pp4でも改善されてないみたいなんですよ。中の人が気づいてないとかありえないんだけど

via http://twitter.com/uupaa/status/23043362479

IE8 や IE9pp4 をインストールしたマシンで、

  • ローカルでファイルを修正する
  • デバッグのON/OFF を何度か行う
  • ページをリロードする

と発現します。

対処方法は、ブラウザの再起動です。

私の環境ではほぼ毎回この現象が発生するので「IE8の開発者ツールは一度かぎりの使い捨てのデバッガ。デバッグしてしまったらブラウザを再起動するもの」という認識です。

# 使い方が悪いのかもしれませんが

このバグにはIE8登場時から非常に困っていて、いつか修正されるものだと思っていたのですが、IE9ppでも一向に修正される気配がありません。

お願いですから、新機能実装にばかり目を向けないで、こういう開発者に対するケアやバグの修正にこそ力を注いでほしいのですが。

追記

ブレークポイントが上手く貼れなくなると、こういった表示もみられるようになります。ありえないアドレスですね。

f:id:uupaa:20100907185929p:image

2010-08-25

return で セミコロンが補完されてしまうのを防ぐ

uupaa.js のビルドツールは、必要な機能のみをビルドすることができます。

//{@mb
  if (uu.ie) {
    alert("IE用の特別な処理だよ");
  } else {
//}@mb
    alert("IE以外の処理だよ");
//{@mb
  }
//}@mb

このコードを、MobileWebKitモード( {@mb から }@mb までを削除) でビルド

% build/upa.php -mb

すると、次のような形に変化します。

    alert("IE以外の処理だよ");

無駄な処理が削れるため、速度も向上しスクリプトも小さくなります。便利ですね。

問題は return + セミコロンの自動補完

  return /*{@mb*/ uu.ie ? "IE用の特別な処理だよ" : /*}@mb*/
                          "IE以外の処理だよ";

このようなコードを build/upa.php -mb でビルトすると、こうなってしまいます。

  return 
                          "IE以外の処理だよ";

これは

  return; 
  "IE以外の処理だよ";

のように return + ; の形で評価されてしまいます。

仕方ないので、この場合はこうしましょう

  return ( /*{@mb*/ uu.ie ? "IE用の特別な処理だよ" : /*}@mb*/
                            "IE以外の処理だよ" );

return (expression); のように、式の前後に ( ) を付けて セミコロン; の自動挿入を阻止してください。

2010-07-29

WebStorageで、ワンライナー IE8, IE9pp3 ブラクラ

localStorage.removeItem() 以外にも、localStorage.setItem(); や localStorage[key] = value; でも落ちるようです(コメント欄参照)

<input id="A" type="text" value="" /><script>localStorage.removeItem(A.value)</script>

上記のコードをIE8で実行すると、タブクラッシュ → 復元 → タブクラッシュ → 復元機能停止 が発生します。

IE9pp3ではブラウザがクラッシュします。

回避するには

テキストフィールドに値を入れるか、A.value を文字列型にキャストすることにより回避できます。

<input id="A" type="text" value="hoge" /><script>localStorage.removeItem(A.value)</script>
または
<input id="A" type="text" value="" /><script>localStorage.removeItem(A.value + "")</script>

動的に発病することも

以下のコードでも発病条件を満たすので気をつけてください。テキストフィールドに対する参照をremoveItemの引数に渡すとダメです。

<input id="A" type="text" value="a" /> // 最初テキストフィールドは空ではないが…
<script>
A.value = ""; // テキストフィールドを空にして…
localStorage.removeItem(A.value); // これでクラッシュ
</script>

変数に入れて渡すのもダメです。

A.value = ""; // テキストフィールドを空にしても…
var val = A.value; // 一度変数に入れれば、あるいは…
localStorage.removeItem(val); // 残念!

以下のコードでは落ちません。

localStorage.removeItem("")

結局どうすればよいか

removeItem() に渡す引数は、必ず文字列にキャストしてしまえば安心できます。

localStorage.removeItem(value + "")

これ以外にも、IE の WebStorage(DOM Storage) の実装は localStorage.key なども W3C の仕様とは微妙に異なっているようです。

そのうち修正されるといいですね。