Firefoxで開発されたJavaScriptがIEで失敗する典型的な理由は何ですか?[閉まっている]


108

最近のFirefoxとSafariで正常に動作するJavaScript拡張ページをいくつか開発しました。Internet Explorerでのチェックに失敗しましたが、IE 6および7(これまでのところ)ではページが機能しません。一部のJavaScriptは実行されますが、スクリプトはなんらかの理由で実行されず、JavaScriptが存在しないかのようにページに表示されます。私はdom操作付きの独自のライブラリーを使用しています。YUI2からはYUI-LoaderとXML-Http-Requestを使用し、1つのページではJQueryに依存する「psupload」を使用しています。

Office XPからMicrosoft Script Editorをインストールしていますが、デバッグしています。私は今、特定のテストも書きます。

IEの典型的な欠点は何ですか?目を開いておくことができる方向。

私はこのページを見つけました、それはいくつかの違いを示しています。訪問:Quirksmode

あなたの経験から、最初に探すべきいくつかの典型的なことを挙げていただけますか?

また、後で特定のタスクについてさらに質問しますが、今のところ、Firefoxで正常に実行されるスクリプトでIEが通常失敗する理由についてのあなたの経験に興味があります。

編集:すばらしい回答をありがとうございます!

それまでの間、コード全体を調整してInternet Explorerでも動作するようにしました。私はjQueryを統合し、自分のクラスをその上に構築しました。これは私の最初の間違いでした。最初からすべてをjQueryで構築しなかったのです。今私が持っています。

また、JSLintは非常に役立ちました。

そして、さまざまな答えからの単一の問題の多くが役立ちました。


以前のコーディングで知っていたように、これまでのところ、CSSやスタイリングに問題はありません。JSの問題のみ-karlthorwald
user89021

1
最初にすべてのファイルに対してJSLintを実行します。適応していないファイルもあります。
user89021 2010

7
「これは私の最初の間違いでした。最初からjQueryですべてのものを構築しなかったのです。」-それはあなたのクロスブラウザ問題のすべてを魔法のように解決するつもりはありません。jQueryとIEのstackoverflowを検索すると、大量の問題が見つかります。クロスブラウザースクリプティングを自分で学習することをお勧めします。jQueryまたはその数十億のスケッチプラグインの1つが失敗したときに、実際に機能するクロスブラウザーソリューションを実装し、それが機能することとその理由を理解できるようになります。
Dagg Nabbit、2010

11
上記のコメントに+1を付ける。jQueryを完全にIFFで回避する方がはるかに優れています。JavaScriptを学習している場合-jQueryは、複雑な処理をすばやく簡単に実行したい場合に非常に役立ちますが、学習している場合は、JavaScriptの実際の理解の複雑さから保護されます。うまくいく-あまりにも多くの人々がjQueryを知っているようですが、javascriptの書き方を知りません。もともとjQueryを基にせずに間違いを犯したことはありませんでした。これで、自分が持っているコードよりも自分のコードをはるかによく理解できました。
ルシダー、2010

回答:


121

エラーや脱落などがあった場合は、このリストを更新してください。

注: IE9は次の問題の多くを修正するため、これの多くはIE8以下と、ある程度の互換モードのIE9にのみ適用されます。たとえば、IE9は、SVGは、サポート<canvas><audio>および<video>ネイティブに、しかし、あなたがしなければならない標準準拠モードを有効にそれらを利用できるようにするため。


一般:

  • 部分的にロードされたドキュメントの問題:window.onload IEは部分的にロードされたドキュメントでの多くの操作をサポートしていないため、JavaScriptを同様のイベントに追加することをお勧めします。

  • 属性の違い:CSSではelm.style.styleFloat、IE elm.style.cssFloatとFirefoxで異なります。で<label>タグfor属性は、使用してアクセスされるelm.htmlForIEで対elm.forFirefoxで。forIEで予約されているため、IE elm['for']が例外を発生させないようにすることをお勧めします。


基本JavaScript言語:

  • 文字列内の文字へのアクセス'string'[0]元のJavaScript仕様にはないため、IEではサポートされていません。配列内の項目へのアクセスは、IEで文字列を使用するよりも大幅に高速であることを使用'string'.charAt(0)または確認'string'.split('')[0]しますcharAt(ただし、splitが最初に呼び出されるときに初期オーバーヘッドがいくつかあります)。

  • オブジェクトの終了前にカンマ:例えばは{'foo': 'bar',}IEには許可されていません。


要素固有の問題:

  • documentIFrameの取得

    • FirefoxおよびIE8 +:( IFrame.contentDocument IEはこれをバージョン8からサポートし始めました。)
    • IE: IFrame.contentWindow.document
    • IFrame.contentWindowwindow両方のブラウザでのを指します。)

  • Canvas: IE9より前のバージョンのIEはこの<canvas>要素をサポートしていません。IEは同様のテクノロジーであるVMLをサポートしていますが、explorercanvas<canvas>多くの操作の要素にインプレースラッパーを提供できます。標準準拠モードのIE8は、VMLを使用する場合、互換モードの場合よりも何倍も遅く、多くのグリッチがあることに注意してください。

  • SVG: IE9はSVGをネイティブでサポートしています。IE6-8はSVGをサポートできますが、JavaScript操作をサポートするプラグインの一部のみを備えた外部プラグインを使用する場合のみです。

  • <audio>および<video> IE9でのみサポートされています。

  • ラジオボタンを動的に作成する: IE <8には、ラジオボタンを作成できないようにするバグがありますdocument.createElement。参照してくださいあなたが動的にすべてのブラウザで動作するJavaScriptでのラジオボタンを作成するにはどうすればよいですか?これを回避する方法について。

  • <a href>タグの埋め込みJavaScript とonbeforeunloadIEの競合:タグのhref一部に埋め込みJavaScriptがある場合a(例:ハンドラーを事前に削除しない限り、<a href="javascript: doStuff()">IEは常にから返されたメッセージを表示しますタブを閉じるときに確認を求めるも参照してください。onbeforeunloadonbeforeunload

  • <script>タグのイベントの違い: onsuccessおよびonerrorはIEではサポートされておらonreadystatechangeず、ダウンロードが成功したか失敗したかに関係なく起動されるIE固有のものに置き換えられます。詳細については、JavaScriptマッドネスも参照してください。


要素のサイズ/位置/スクロールおよびマウスの位置:

  • 要素のサイズ/位置を取得する:要素の幅/高さはelm.style.pixelHeight/WidthでなくIEにある場合もありますがelm.offsetHeight/Width、IEの場合、特に互換モードではどちらも信頼できない場合があり、一方が他方よりも良い結果をもたらす場合があります。

    elm.offsetTopそしてelm.offsetLeft多くの場合、間違ってポップアップ要素などが例多くに数ピクセルオフになっている理由である、間違っている要素の位置を見つけることにつながる、と報告されています。

    要素(または要素の親)にdisplayof があるnone場合0、Firefoxのように戻るのではなく、サイズ/位置属性にアクセスするとIEが例外を発生させることにも注意してください。

  • 画面サイズを取得する(画面の表示可能領域を取得する):

    • Firefox: window.innerWidth/innerHeight
    • IE標準モード: document.documentElement.clientWidth/clientHeight
    • IE癖モード: document.body.clientWidth/clientHeight

  • ドキュメントのスクロール位置/マウス位置:これは実際にはw3cによって定義されていないため、Firefoxでも非標準です。検索するには、scrollLeft/ scrollTopのをdocument

    • 互換モードのFirefoxおよびIE: document.body.scrollLeft/scrollTop
    • 標準モードのIE: document.documentElement.scrollLeft/scrollTop
    • 注:他の一部のブラウザでもpageXOffset/ pageYOffsetを使用しています。

      function getDocScrollPos() {
       var x = document.body.scrollLeft ||
               document.documentElement.scrollLeft ||
               window.pageXOffset || 0,
           y = document.body.scrollTop ||
               document.documentElement.scrollTop ||
               window.pageYOffset || 0;
       return [x, y];
      };
      

    マウスカーソルの位置を取得するために、evt.clientXおよびevt.clientYmousemoveのイベント文書への相対的な位置を与えるのスクロール位置を追加することなく、以前の機能が組み込まれることが必要になりますので。

    var mousepos = [0, 0];
    document.onmousemove = function(evt) {
     evt = evt || window.event;
     if (typeof evt.pageX != 'undefined') {
      // Firefox support
      mousepos = [evt.pageX, evt.pageY];
     } else {
      // IE support
      var scrollpos = getDocScrollPos();
      mousepos = [evt.clientX+scrollpos[0], evt.clientY+scrollpos[1]];
     };
    };
    

選択/範囲:

  • <textarea><input>セレクションselectionStartselectionEndIEには実装されていません。代わりに独自の「範囲」システムがあります。テキストエリアのキャレット位置最初からの文字で参照してください。

  • ドキュメントで現在選択されているテキストを取得します。

    • Firefox: window.getSelection().toString()
    • IE: document.selection.createRange().text


IDによる要素の取得:

  • document.getElementByIdnameフォームの属性を参照することもできます(ドキュメントで最初に定義されているものに依存します)。同じnameとを持つ異なる要素を持たないことが最善idです。これはidw3c標準ではなかった時代にさかのぼります。document.all独自のIE固有のプロパティ)はよりもはるかに高速ですがdocument.getElementById、常にname以前に優先されるため、他の問題がありますid。私はこのコードを個人的に使用しており、念のため追加のチェックを行っています。

    function getById(id) {
     var e;
     if (document.all) {
      e = document.all[id];
      if (e && e.tagName && e.id === id) {
       return e;
      };
     };
     e = document.getElementById(id);
     if (e && e.id === id) {
      return e;
     } else if (!e) {
      return null;
     } else {
      throw 'Element found by "name" instead of "id": ' + id;
     };
    };
    

読み取り専用innerHTMLの問題:

  • IEがないサポートしていないのinnerHTMLプロパティを設定しcolcolGroupframeSethtmlheadstyletabletBodytFoottHeadtitle、およびtr要素。これは、テーブル関連の要素に対してそれを回避する関数です。

    function setHTML(elm, html) {
     // Try innerHTML first
     try {
      elm.innerHTML = html;
     } catch (exc) {
      function getElm(html) {
       // Create a new element and return the first child
       var e = document.createElement('div');
       e.innerHTML = html;
       return e.firstChild;
      };
      function replace(elms) {
       // Remove the old elements from 'elm'
       while (elm.children.length) {
        elm.removeChild(elm.firstChild);
       }
       // Add the new elements from 'elms' to 'elm'
       for (var x=0; x<elms.children.length; x++) {
        elm.appendChild(elms.children[x]);
       };
      };
      // IE 6-8 don't support setting innerHTML for
      // TABLE, TBODY, TFOOT, THEAD, and TR directly
      var tn = elm.tagName.toLowerCase();
      if (tn === 'table') {
       replace(getElm('<table>' + html + '</table>'));
      } else if (['tbody', 'tfoot', 'thead'].indexOf(tn) != -1) {
       replace(getElm('<table><tbody>' + html + '</tbody></table>').firstChild);
      } else if (tn === 'tr') {
       replace(getElm('<table><tbody><tr>' + html + '</tr></tbody></table>').firstChild.firstChild);
      } else {
       throw exc;
      };
     };
    };
    

    また、IEは、を使用して作成するときに、その要素にsを追加<tbody>する<table>前に、をに追加する必要があることに注意してください。次に例を示します。<tr><tbody>document.createElement

    var table = document.createElement('table');
    var tbody = document.createElement('tbody');
    var tr = document.createElement('tr');
    var td = document.createElement('td');
    table.appendChild(tbody);
    tbody.appendChild(tr);
    tr.appendChild(td);
    // and so on
    

イベントの違い:

  • event変数の取得: DOMイベントはIEの関数に渡されず、としてアクセスできますwindow.event。イベントを取得する一般的な方法の1つは、たとえば
    elm.onmouseover = function(evt) {evt = evt||window.event}
    、デフォルトのwindow.eventif evtが未定義の場合に使用することです。

  • キーイベントコードの違い:キーイベントコードは大きく異なりますが、QuirksmodeまたはJavaScript Madnessを見ると、IE、Safari、Operaに固有の違いはほとんどありません。

  • マウスイベントの違い:button IE の属性はビットフラグであり、一度に複数のマウスボタンを使用できます。

    • 左: 1(var isLeft = evt.button & 1
    • 右: 2(var isRight = evt.button & 2
    • 中央: 4(var isCenter = evt.button & 4

      W3Cモデル(Firefoxでサポートされています)は、IEモデルよりも柔軟性が低く、一度に1つのボタンだけが左0、右2、中央がとして許可されています1。Peter-Paul Kochが言及しているように、これは0通常「ボタンなし」を意味するため、非常に直感に反していることに注意してください。

      offsetXそして、offsetYしている問題と、それはIEでそれらを避けるために、おそらく最高です。IEでoffsetXand を取得するより信頼性の高い方法は、相対的に配置された要素の位置offsetY取得し、それをclientXand から減算することclientYです。

      また、IEでは、clickイベントでダブルクリックを取得するには、clickdblclickイベントの両方を関数に登録する必要があります。Firefoxはダブルクリック時にclickdblclick起動するため、同じ動作を行うにはIE固有の検出が必要です。

  • イベント処理モデルの違い:独自のIEモデルとFirefoxモデルの両方がボトムアップでのイベントの処理をサポートします。たとえば、<div><span></span></div>thenの両方の要素にイベントがある場合、イベントはその順序ではなく、span thenでトリガーされdivます。伝統的なeg elm.onclick = function(evt) {}が使用された場合にバインドされます。

    「キャプチャ」イベントは通常、Firefoxなどでのみサポートされています。これによりdivspanイベントが上から下にトリガーされます。IEにはelm.setCapture()、他のイベントを処理する前にelm.releaseCapture()、ドキュメントから要素(elmこの場合)にマウスイベントをリダイレクトする機能がありますが、パフォーマンスやその他の問題があるため、おそらく回避する必要があります。

    • Firefox:

      アタッチelm.addEventListener(type, listener, useCapture [true/false])
      デタッチをelm.removeEventListener(type, listener, useCapture)
      type例えばされ'mouseover'ずにon

    • IE:要素の特定のタイプの単一のイベントのみをIEに追加できます。同じタイプの複数のイベントが追加されると、例外が発生します。また、thiswindow、イベント関数のバインドされた要素ではなくを参照していることにも注意してください(そのため、あまり役に立ちません)。

      アタッチelm.attachEvent(sEvent, fpNotify)
      デタッチをelm.detachEvent(sEvent, fpNotify)
      sEventあるなど'onmouseover'

  • イベント属性の違い:

    • 他のリスニング機能によるイベントの処理を停止します

      Firefox: evt.stopPropagation()
      IE: evt.cancelBubble = true

    • たとえば、キーイベントによる文字の挿入やチェックボックスのチェックの停止を停止します。

      Firefoxの: evt.preventDefault()
      IE: evt.returnValue = false
      注:ただ、帰国falseしてkeydownkeypressmousedownmouseupclickresetもデフォルトを防ぐことができます。

    • イベントをトリガーした要素を取得します。

      Firefox: evt.target
      IE: evt.srcElement

    • マウスカーソルが移動した要素を取得する: イベントの場合、evt.fromElementIEはevt.targetFirefoxにありonmouseout、それ以外の場合evt.relatedTarget

    • マウスカーソルの移動先の要素を取得する: evt.toElement IEのevt.relatedTarget場合、onmouseoutイベントの場合はFirefox 、それ以外の場合evt.target

    • 注:( evt.currentTargetイベントがバインドされた要素)には、IEに相当するものはありません。


12
とても、とても、とても素敵なリスト!貢献してくれた皆さんに感謝します:)
cwap 2010

26

コード内にこれらまたは類似のコンマがないかどうかも確認してください

var o={
'name1':'value1',
'name2':'value2',
} 

最後のカンマ(value2に続く)はFirefoxでは許容されますが、IEでは許容されません


1
ほとんどの優れた編集者はこれをキャッチする必要があります
SeanJA 2010

1
+1、これを頻繁に食べました。
デビッドV.

1
できれば+10を差し上げます-これは私にとってすべての期間に起こります。
ジョシュ

ああ、@ SeanJAのコメントに追加します。私は最近これをキャッチするNetBeansに切り替えました。
ジョシュ

初めてJS作業を行ったとき、これに多くの時間を費やしました。最初にチェックするのはこれです!悪質なTextmateの展開を呪い、カンマを残します。
Agos

12

投稿にタグが付けられているときにjQueryまたはYUIを使用することに固執する場合は、ブラウザー間の違いが最小限である必要があります。それがフレームワークの目的であり、これらのブラウザー間の違いに対応します。

例として、quirksmode DOMトラバーサルページを見てください。IEはほとんどのものをサポートしていません... trueである一方で、フレームワークはサポートしていますが、たとえばIEはサポートしていませんelem.childElementCountが、jQuery $(elem).children().size()ではこの値を取得します。すべてのブラウザで。少なくともスクリプトでは、ブラウザー全体でサポートされていないケースの99%を処理するためにライブラリに何かがあることがわかります... CSSでは、ライブラリのプラグインに移動する必要があるかもしれません。これの一般的な例は、角を丸めることです。 IEでの作業... CSSのサポートがないため。

ただし、のようdocument.XXX(thing)に物事を直接始めた場合、ライブラリにいないので、javascriptを直接実行しています(すべてjavascriptですが、要点はわかります)。これにより、問題の原因となる場合とそうでない場合があります。その特定の機能を実装するとき、IEチームは酔っていました。

IEを使用すると、右の生のjavascriptの問題、オフアニメーションいくつかのピクセルをし、そういったことよりも、出てくるのスタイリングに失敗する可能性が高くなりますずっともちろん、IE6で、より-そう。


私は今よく理解しています。はい、私もそのようなことを直接行いました。karlthorwald
user89021

1
NetbeansのようなIDEを使用している場合は、JavaScriptのターゲットブラウザーを設定できます。また、サポートされていないように思われる操作を行ったときに警告することもできます。
SeanJA 2010

10

getElementbyIDはIEのname属性にも一致しますが、他のブラウザーには一致しません。IEは最初に検出した方を選択します。

例:

<script>
 var foo = document.getElementById('bar');
</script>

....
<input name="bar" type="text" />  //IE will get this element
<span id="bar"> Hello, World! </span>  //FF,Safari,Chrome will get this element

3
失礼になって申し訳ありませんが、IEは本当に醜い
user89021

12
document.getElementByIdOrNameIGuessWhateverMan(id);
JulianR

5

たくさんありますが、私が陥りがちだった1つの落とし穴は、引用符で囲まれた名前なしで多くのブラウザーがJSONを受け入れるのに対し、ie6とie7は受け入れないということです。

{ name: "Jakob" } // will often work, but not in ie6/ie7
{ "name": "Jakob" } // Better!

編集:明確にするために、これはオブジェクトリテラルではなく、実際のJSONが必要な場合にのみ問題になります。JSONはオブジェクトリテラル構文のサブセットであり、データ交換フォーマット(XMLなど)として意図されているため、より厳密に設計されています。


2
これはコンテキストに依存し、オブジェクトリテラルは問題ありませんが、JSONはそうではないことに注意してください。たとえば、jQueryは最新のリリースでは無効なJSONをまったく許可していません。
Nick Craver

私の反対票ではありません...しかし、他の人のためにこれを明確にしてから、私から+1する必要があります。
Nick Craver

5

JavaScriptサポートの違い

IEは、1.5以降、JavaScriptに追加された拡張機能の(ほとんど)をサポートしていません。

1.6の新機能

  • アレイ法- 、indexOf()lastIndexOf()every()filter()、、forEach()map()some()
  • for each ... in -プロパティ名の代わりに値を繰り返します。

1.7の新機能

1.8の新機能

  • 配列メソッド- reduce()reduceRight()
  • 関数を定義するためのショートカット。

これらの事のいくつかは、(IEの下で中断されます)の下で実行するにはJavaScriptのバージョン番号を指定する必要がありますが、のようないくつかのもの[1,2,3].indexOf(2)、あなたがIEでそれを実行しようとするまでのかもしれないではなく、その大したことのように見えます


1
ここで話しているJavaScriptはMozillaのJavaScript(TM)であり、より一般的な意味でのJavaScriptではありません。すべてのECMAScript実装/ JavaScriptエンジン(この場合はMS JScript)がMozillaのJavaScript(TM)に準拠しているとは限りません。ECMAScriptはJavaScript(TM)ではなく標準であり、JavaScript(TM)はJavaScriptではありません。私はそれが理にかなっていると思います。
Dagg Nabbit、

私には理にかなっていますが、JavaScriptとJScriptの互換性についてのスレッドで、私はそれがすでに理解されていると考えました:)
gnarf

「IEは1.5以降のJavaScriptに追加された拡張機能の(ほとんど)をサポートしていません」と言うとき、mozillaのJavaScript(TM)はIEが準拠すべき標準であると言っているようですが、もちろんそうではありません。あなたは、少なくとも質問は「最も」の違いについてでしたMozillaのJavaScriptや類似した...他のブラウザではなど、割り当てを構造化代入のようなECMAScriptのにMozillaのすべての拡張機能をサポートしていないと言うことができるjavascriptと(特定の実装)JScript、ではないとの違いMozilla JavaScript(TM)JScript。IEがESから逸脱している場所を示す方がよい場合があります。
Dagg Nabbit、2010

3

IEのJavaScriptと最近のブラウザー(Firefoxなど)のJavaScriptの主な違いは、CSS /(X)HTMLクロスブラウザーの違いの背後にある同じ理由によるものです。当時、事実上の標準はありませんでした。IE / Netscape / Operaは、大部分の仕様を実装するだけでなく、いくつかの仕様を省略して、互いに優位に立つために、激しい戦争を戦いました。私は長く続けることができますが、IE8のリリースまでスキップできます。JavaScriptは何年もの間回避されたり軽蔑されたりしました。FFの台頭とWeb通信の軽蔑により、IEは主にCSSをIE6から進めることに集中することを選択しました。そして基本的にDOMサポートは取り残されました。IE8のDOMサポートは、2001年にリリースされたIE6と同じである可能性があります。したがって、IEのDOMサポートは、最新のブラウザーより10年近く遅れています。レイアウトエンジンに固有のJavaScriptの不一致がある場合は、CSSの問題で行ったのと同じ方法でJavaScriptを攻撃するのが最善です。そのブラウザをターゲットにします。ブラウザのスニッフィングを使用しないでください。機能検出を使用して、ブラウザ/そのレベルのDOMサポートをスニッフィングします。

JScriptは、IE独自のECMAScriptの実装ではありません。JScriptは、NetscapeのJavaScriptに対するIEの答えでした。どちらもECMAScriptの前に登場しました。

script要素のtype属性に関する限り、type = "text / javascript"がデフォルトの標準(少なくともHTML5では標準)であるため、スクリプトがJavaScriptでない限り、type属性は必要ありません。

IEがinnerHTMLをサポートしていない限り... innerHTMLはIEによって発明され、現在でもDOM標準ではありません。他のブラウザはそれが便利だからそれを採用しました、それがあなたがそれをあなたがそれをクロスブラウザで使うことができる理由です。動的に変化するテーブルに関する限り、MSDNは「テーブルに必要な特定の構造のため、テーブルとtrオブジェクトのinnerText プロパティinnerHTMLプロパティは読み取り専用である」と述べています。最初はどれだけ本当だったかはわかりませんが、最近のブラウザーは、テーブルレイアウトの複雑さを処理する際にそれを理解しました。

JavaScriptでPPKを読むことを強くお勧めします。 ジェレミーキースのDOMスクリプティング Douglas CrockfordのJavaScript:The Good Parts とChristian HellmanのJavaScriptをDOM ScriptingとAjaxで理解するために、JavaScriptをしっかりと理解してください。

フレームワーク/ライブラリに関する限り、JavaScriptをまだ十分に理解していない場合は、回避する必要があります。2年前、私はjQueryトラップに陥り、すばらしい偉業を成し遂げることができましたが、JavaScriptを適切にコーディングすることについていまいましいことを学んだことはありません。後から見ると、jQueryは邪悪な素晴らしいDOMツールキットですが、適切なクロージャーやプロトタイプの継承などを学ぶことができなかったため、個人的な知識が戻っただけでなく、私が行っていた手掛かりがなかったため、私の仕事は莫大なパフォーマンスに影響し始めました。

JavaScriptはブラウザの言語です。クライアントサイド/フロントエンドエンジニアの場合、JavaScriptをコマンドすることが最も重要です。Node.jsはJavaScriptを完全に傾斜させていますが、その開発において日々大きな進歩が見られます。サーバーサイドJavaScriptは、近い将来標準になるでしょう。これについては、JavaScriptの重要性と現在の重要性をさらに強調するために言及しています。

JavaScriptはRailsよりも多くの波を作るでしょう。

ハッピースクリプト!


2
いい答えですが、機能検出を使用してブラウザーを嗅ぐことに同意しません。これらの機能のサポートをテストするには、機能検出のみを使用してください。「機能検出はブラウザー検出ではない」の例も参照してください。
Marcel Korpel、2010

ええ。私はあなたの意見の相違に完全に同意します。それをキャッチしてくれてありがとう。私はまだJavaScript n00bですが、ゲームに恥はありません。「機能ベースのブラウザー検出は、すべてのコストで回避すべき非常に悪い習慣です。単純な機能検出はベストプラクティスであり、ほとんどすべての場合、まさに必要なものです。」
アルバート

2

一部のネイティブオブジェクトは、実際にはそうではないように見えますが、読み取り専用です(書き込みは可能ですが、効果はありません)。たとえば、一般的な高度なJavaScriptはElement、システムメソッドをオーバーライドすることによるオブジェクトの拡張に基づいています。たとえば、Element.prototype.appendChild()を変更して、子ノードを追加するだけではなく、たとえば親のデータで初期化します。これはIE6で警告なしに失敗します-新しいオブジェクトではなく新しいオブジェクトで元のメソッドが呼び出されます。

一部のブラウザー(今は覚えていません)では、HTMLタグ間の改行をテキストノードと見なしていますが、他のブラウザーはそうではありません。したがって、childNodes(n)、nextSibling()、firstChild()などの動作は大きく異なります。


2

配列の末尾のコンマとオブジェクトリテラルが問題となっていたが、最近チェックされていない(IE8を意味する)。

var a = [ 1, 2, 3, ];
var o = { a:1, b:2, c:3, };

これにより、このような構造をサーバー側で生成するときに余分なコードが発生します。


2

今朝私が見つけたのは、同僚がスクリプトタグを次のように設定した場合 <script type="application/javascript">です。彼のideオートコンプリートが "text / javascript"の前に持っていたからです。

しかし、「application / javascript」を使用する場合、IEはスクリプト全体を単に無視することがわかり、「text / javascript」を使用する必要があります


すべてのブラウザでjavascriptがデフォルトになっているので、そのまま使用してください<script>
Lauri

2

先日Internet Explorerで奇妙な癖を見つけました。私はYUIを使用していて、innerHTMLを設定することでテーブル本体()の内容を置き換えました

Y.one('#elementId').set('innerHTML', '<tr><td>Column 1</td></tr>');

これは、IEを除くすべてのブラウザーで機能します。IEでテーブルのinnerHTMLを置き換えることができないことをついに発見しました。YUIを使用してノードを作成してから、そのノードを追加する必要がありました。

var myNode = Y.node.create('<tr><td>Column 1</td></tr>');
Y.one('#elementId').append(myNode);

それは理解するのが楽しいものでした!


1
<tbody>タグでくるむ必要があるような気がします。
ケーシーチュー

元のコードでは、実際には<tbody>タグで囲まれています。それでもIEが気に入らなかったのは私の心を吹き飛ばします。Microsoftの公式ドキュメントで読んだのを覚えていますが、リンクが見つかりません。ごめんなさい!
ジャスティン

1

余分なコンマと欠落したコンマは、FFでスムーズに機能する一方でIEでは通常の問題でした。


1

IEは ";"がないことについて非常に厳密です。通常そうです。


私がjsLintingをしているときに、これらの多くを見つけます。重要なポイントのようです。
user89021 2010

1

それだけの価値があるので、IE9でこの厄介な問題に遭遇しました

次のようなhtmlがあるとします。

<table><tr><td>some content...</td></tr></table>

そして、何らかの理由で(私は良いものでした)、最後のクローズTRの前にテーブル内のすべてのHTMLを取得する必要があります。

var tableHtml = document.getElementById('thetable').innerHTML;
var fragment = tableHtml.substring(0, tableHtml.lastIndexOf('</tr>'));

<IE9はここでは何も返しません(-1)。これは、tableHtml変数にすべてのHTMLタグが大文字で含まれ、lastIndexOfが大文字と小文字を区別するためです。これを回避するには、lastIndexOfの前にtoLowerCase()をスローする必要がありました。


0

IEは最新のブラウザではなく、ECMAScriptを大まかにフォローしているだけです。


0

私はあまり馴染みのないjQueryについて言及しましたが、一般的な参照として、特にプロトタイプについては、IEの予約語/メソッド名に注意する必要があります。私がよく利用されるのは次のようなものです。

someElement.appendChild(new Element('label',{ **for**: someInput.id }).update( someLabelText );

(新しいElement(tagName、propertyHash)は、Protitypeで新しい要素が作成される方法です)。は予約語であるため、IEではでfor:なければなりません。これは完全に理にかなっています-しかし、FireFoxはこれを許容します。'for':for

もう一つの例:

someElement.wrap('div').addClassName('someClass')

wrapPrototype のメソッドは1つの要素を別の要素でラップします)-IEでは、textareas上のwrapプロパティでありElement.wrap()、メソッド化されたバージョンの代わりに使用する必要があります

これらは私の経験から思い浮かぶ2つの例です。それらはプロトタイプに基づいていますが、コアの問題はそうではありません:IEが予約語と見なしているが、FireFoxまたはSafariが許容するメソッド/ラベル/識別子に注意してください。


0

実際には、IEはJavaScriptをサポートしていません...それはECMAScriptの彼自身の実装をサポートしています:JScript ...ちょっと違う...


0

console.log()Firefoxエラーコンソールにエラーを出力するためにを使用すると、IEでスクリプトが失敗します。IEでテストするときは、これらを取り出すことを忘れないでください。


FireBugをオンにしていない場合、Firefoxでもconsole.logの使用は失敗すると思います。
ejel 2010
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.