本エントリは JavaScript Advent Calendar 201314日目となります。 来年遂にXPが逝去されるということで、IE9以降のシェアが飛躍的に伸びることを祈りつつ、IE9以降でJavaScriptでできるようになることを気がつく限りまとめてみました。 DOM addEventListener / removeEventListener イベントを登録/削除するためのメソッド。IE8まではattachEventとdetachEventという似たような、でも割と細かいところで動きが違うメソッドを使う必要があったが、IE9から標準のaddEventListenerがサポートされている。 ※ jQueryのon/offとかbind/unbindとだいたい同じ。 ※ 第3引数はuseCaptureといって、trueにするとイベント伝播を上位のDOMから発生させることができる。ま
user-agentを参照せずに、IE6, 7, 8, 9の各バージョンを判定するスクリプトを紹介します。 var ie = (function(){ var undef, v = 3, div = document.createElement('div'), all = div.getElementsByTagName('i'); while ( div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->', all[0] ); return v > 4 ? v : undef; }());
セレクタ(id, tag, class, css, xpath)の実行速度を改善するには、2つの方法があります。 ロジックを改善する キャッシュを使う 今日は2の方法について検討したことを書き残します。 心配事 キャッシュを使う上での心配事は「キャッシュが古くなったらどうするか、それをどうやって知るか?」です。 古くなったキャッシュはクリアしなければなりません。 DOM Level2 MutationEvents を使うと、ノードの挿入, 削除と、属性の更新 を取得できる DOM Level2 MutationEvents という仕様があります。これらを活用するとDOMツリーが更新されたタイミングを監視できます。 DOMNodeInserted は ノードの挿入, DOMNodeRemoved は ノードの削除, DOMAttrModified は 属性の変更に対応しています。 各ブラウザ
140文字以内でパスワード丸見え - latest log IE対応は結構面倒なんですよね。 まず、IEはinput要素のtypeを書き換えさせてくれないので次のようなスクリプトすら通らない。 var d=document.createElement('div'); d.innerHTML='<form name="f"><input type="text" name="t"></form>'; document.body.appendChild(d); var t=document.getElementsByName('t')[0]; alert(t.type);// -> text t.type='password';//ERROR! そこでouterHTMLで書き換えをする var d=document.createElement('div'); d.innerHTML='<form
理由がない限り、Array.join("") による文字列連結は使わないほうがいいみたい - latest log の件について。 IE6の+による文字列結合が遅くて、Array.joinで連結するとマシになるよって話を(私が)初めて聞いたのはShibuya.js第1回の id:amachang の発表だったと思います。 Shibuya.js Technical Talk #1 を終えて。 - IT戦記 *1 少なくとも3年以上前のバッドノウハウが未だにIE6のみならず、IE7でも有効という現実に気が遠くなりそうですね。 で、IE6,7は基本的なパワー不足で、同じJavaScriptでも他のブラウザより処理が遅いことがほとんどです。遅いブラウザに合わせてチューニングをするほうが一般的なので、特に理由がなければArray.joinを使っておいたほうが無難だと思います。 Array.joinを
仕事で、こんな要件があった。 あるリンクを押したらポップアップでhoge0001.htmlを表示して、同時に開いているブラウザの画面をhoge0002.htmlになるようにしてほしい。 というわけでこんなコードを書いた。 <a href="javascript:;" onClick="window.open('/popup/hoge0001.html','_blank','menubar=no,scrollbars=yes,resizable=yes,width=760,height=760'); document.location.href='/hoge0002.html';">hoge</a> Firefox 3.0.4で動作チェックをしてテスト環境に入れてみたらお客さんからIE6だと動かないと言われたので調査してみた。 とりあえずwindow.openで処理が止まってないか調べるため
IEでのデバッグ/動作確認に便利なソフトいろいろ。 沢山あるのでまとめてみました。 IETester IE5.5, IE6, IE7, IE8でのページレンダリングを1つのソフトで一括チェックできる超優れものソフト。 Vistaでも使えるようで今後のWEB開発に必須となりそうなツール。 IEとFirefoxの同時レンダリングはCSSVistaが便利。 DebugBar IEに便利機能のついたツールバーを追加 ブラウザ画面のキャプチャをメール送信 カラーピッカー 特定の画面解像度にリサイズする機能 ページの表示を 10% 〜 800% まで拡大/縮小表示できる( IE の Zoom 機能使用 ) 画像やFlashなどのobject も拡大縮小できます ソースコードをハイライト付きで表示 オリジナルのソースと、IEが解釈した後のソースを見比べることも可能 指定文字列ハイライト検索機能 Comp
はじめに XML/(X)HTML文書の動的な制御には、DOMがよく使われるけれども、MSIEでは云々…という話がしょっちゅうある。ここでの目的は、ぽかぽかWeb研究室のDOM Level 2 標準技術をMSIEで使うシリーズ(イベント、基本操作、XML読み込みとXPath)と同様、MSIEも視野に入れつつなんとか標準技術の便利さを享受しよう、というアプローチ。別名、悪あがき。 今回はECMAScript(JavaScript,JScript)を用いてDOM2HTMLのプロトタイプをあれこれいじれるようにしてみたい。 DOM Level2 HTMLのプロトタイプ ECMAScriptには、プロトタイプ(雛形)にプロパティを追加してやると、同じ雛形を用いてコンストラクタ(工場)から生成されたオブジェクトはみんな同様のプロパティを持つ/扱えるようになる、という仕組みが採用されている。で、ECMA
FireFoxなどにあるHTMLElementのprototypeに共有の便利メソッドを突っ込みたいという欲求があるんですがIEでは実装されていないのでうまくいきません。googleっても出てこねぇよ！ということで仕様読む。MSDN見ていたらどうやらIEではDOMイベントなどの定義にはprototypeではなくHTC(HTML Component)という機構で実装されているからだそうで…*1 DIVエレメントに共通のonclickイベントを仕込む 以下のスクリプトは全てのDIV要素にonclickイベントを仕組むスクリプトです。alert("hoge");されます。 ■hoge.htc <public:component> <public:attach event="onclick" onevent="hoge()" /> <script language="JScript"> funct
javascriptのIE6用クロスブラウザ対応の話です。 仕事でjavascriptを使うと普段はスルーしていた だるい部分をスルーできなくなり、必然的にこういう内容が多くなります。 普通の複数行選択select要素の作成方法 var select = document.createElement("select"); select.multiple = true; alert(select.type); // "select-multiple" XP-FireFox1.5とMac-Safari2で確認しました。 糞XP-IE6の場合 var select = document.createElement("<select multiple>"); alert(select.type); // "select-multiple"; multiple属性にtrueを入れる方法だと、ク
IE6以下をWeb標準に準拠させるライブラリ『IE7.js』 多くの人が待ちに待ち望んだライブラリ。やはりすごい人はすごいものを作るんですね。 このライブラリを読み込むことによりIE6以下でもIE7と同じようなXHTM/CSSの解釈を行ってくれます。 ただし完全にIE7と同じような形にするのではなく、より近い形ということです。 現在公開されているバージョンはversion 2.0 (beta)ということで、まだ実務で使うのは難しいかもしれませんが、MITライセンスで公開されておりますので正式にリリースされればweb制作の現場を変えてしまうライブラリです。 設置方法 Google コードのie7-jsより直接読み込むことが可能です。 以下の要素をhead要素内などに記述します。 <!--[if lt IE 7]> <script src="http://ie7-js.googlecode.c
Windows XP 用の更新プログラム (KB942840) で、JScriptエンジンのガベージコレクション（GC）のアルゴリズムが変更されて、 Ajaxをゴリゴリ使っているWebサイトでIE6の体感速度がかなり改善された（JavaScript実行途中で固まることがなくなった）模様。 Windows Server 2003 ベースのコンピュータまたは Windows XP ベースのコンピュータで Internet Explorer 6 の JScript を使用する Web ページを表示すると、パフォーマンスの Web ブラウザ低下が発生することがあります。 原因 スクリプトが多くの変数を同時に作成すると、この問題は、発生することがあります。 また、この問題が同じ時刻で解析される一意の多くの値がスクリプトに含まれる場合、発生することがあります。 この問題は JScript エンジンがガ
Dean Edwards氏は7日(米国時間)、IEの動作をW3C標準仕様へ準拠させるためのライブラリIE7.jsの最新版を公開した。IE7.jsはJavaScriptで開発されたMS Internet ExplorerのHTML/CSS表示を調整するライブラリ。IE7.jsを使うことでMSIEのHTML/CSSまわりの表示処理をよりW3C標準規約に準拠したものにする。IE5やIE6で透過PNGを表示できるようにもなる。 IE7.jsは基本的にMSIE5/6向けに用意されていたライブラリをIE7に対応させたもの。これまでのモジュール構造は廃止され、IE7.jsやIE8.jsといったように個別のファイルに分離されている。ホスティング先もGoogle Codeへ変更された。IE7.jsはサイズも縮小され、圧縮した状態で11KBほど。またbase2.DOMのセレクタエンジンを使うことでより高速に動
Opera たん… getElementsByName で id もとれる // <input name="foo" id="bar" /> // <input name="bar" id="foo" /> var elms = document.getElementsByName('foo'); alert(elms.length); // 2 ( id="foo" のほうも選択しちゃう ) getElementById で name だけとれる // <input name="foo" id="bar" /> // <input name="bar" id="foo" /> var elm = document.getElementById('foo'); alert(elm.id); // bar
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
