恐竜ウォーク：IE 7のWebアプリケーションをどのように適合させたか

最近、私は過去数年間余暇に取り組んでいたプロジェクトを、ある会社のコンペティションに送ることにしました。 私は座って、私が考慮しなかったニュアンスがあるかどうか考え始めました。それは印象を台無しにして成功の可能性を減らすことができました。 そして、私が最初に思いついたのは、バージョン9以下のIEではプロジェクトが機能しないということでした。 つまり、完全にロックがありました。 ログイン後、ブラウザがサポートされていないことを示す美しい警告とともにウィンドウが表示され、ユーザーは再びログインフォームにリダイレクトされました。 かなりエレガント-しかし不快。 ユーザーがWindows XPを使用していて、サードパーティのブラウザーがない場合はどうなりますか？ 運が悪い。



そのため、必要なだけの時間を費やすことにしましたが、同時に少なくともIE 8でシステムの安定したエラーのない動作を実現しました。必要に応じていくつかの機能を削除する準備ができました。 長くて厳しい苦しみ（これをすでに何度か経験していました）を予想して、仕事に取りかかりました。 あなたが私がどんな困難に遭遇し、さまざまなコンポーネントにどのような変更を加えなければならないかを知りたいなら、catへようこそ。



私がこれを行った理由を思い出し始めました-そして、データがXHRから来ていないのを見た後、レイアウトの欠陥を修正しようとさえしなかったことを思い出しました。 データを自動更新しないメッセンジャー（常にF5を押す必要がある）は完全なサーカスであるとの理由から、そのロックを導入しました。



しかし、この後、似たような症状に出くわして2〜3件のケースがすでにあり、それらを正常に除去しました。 そして、このプロジェクトについて-私は何とかここでの問題が同じであることを忘れていました。 この最初の修正により、最も重要な問題を排除することができ、さらに改善するための道が開かれました。



以下に、古いバージョンのInternet Explorerをサポートする場合に考慮する必要がある基本的な非互換性を示します。 さあ、行こう！

IEはCP1251エンコーディングが何であるかを知りません（すべてのバージョン）

この問題-パラドックス-はまだ存在しています。 11日までのIEのすべてのバージョンに影響します。 おそらくマイクロソフトはこれをバグとは見なしませんが、開発中にこれを考慮する必要があります。そうしないと、ブラウザーはAJAX経由で送信されたすべてのデータを無視します。 2つの解決策があります。エンコードを.htaccess経由で追加する（Apacheがある場合）か、 header()



経由で直接PHPコードに追加します。 2番目のオプションはより汎用的ですが（どのWebサーバーでも動作するはずです）、より時間がかかり、明らかにコードを詰まらせるので、構成内の次の行を優先します。

 AddDefaultCharset windows-1251
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その後、応答ヘッダーはContent-Type: text/html; charset=CP1251



Content-Type: text/html; charset=CP1251



はContent-Type: text/html; charset=windows-1251



変更されContent-Type: text/html; charset=windows-1251



Content-Type: text/html; charset=windows-1251



、すべてが機能します。

一部の擬似クラス（IE8以下）のサポートの欠如

たとえば、 nth-child()



セレクターは機能しません。 レイアウトとスタイルがすでに記述されている場合、これは大きな問題を引き起こします。 必要なブロック（たとえば、コンテナの2番目）をHTMLのすべての場所に特別なクラスを登録するか、単一のJavaScript関数を記述し、スタイルを介して必要なスタイルを割り当てる適切なソリューションは2つだけです。 2番目のオプションは、マークアップが不要なクラスで詰まっていないため、作業が少なく、何かが発生した場合に削除するのが簡単であるため、より有利に思えました-そして最も重要なことは、この場合、必要なバージョンのIEに対してのみこのコードを実行し、 if()



でラップすることです 注：最初のオプションを選択した場合、条件付きコメントだけではできません。マークアップ自体を変更する必要があり、通常は不要なclass



属性を追加します。

バックグラウンドサイズのサポートの欠如（IE8以下）

はい、 background-size



プロパティはCSS3の一部であるため、サポートされていません。 予測可能ですが、非常に悲しいです。 たとえば、ほぼ適切なサイズの小さなアイコンがあり、完全ではない（たとえば、20〜50％多い）と仮定します。 開発中に、通常のdivを作成し、それを背景として設定し、background-sizeを設定できます。 IE8では、より大きなサイズで完全に取得できます。 ここで、imgを介してレイアウトを変更し、サイズに設定できます。 ただし、通常、適切なサイズの写真のコピーを1つ（または必要なだけ）作成し、マークアップをそのままにしておく方が安価です。

表示不足：インラインブロック（IE7以下）

ここではdisplay: inline



置き換える必要がありdisplay: inline



まったく同じように機能します（外部インデントがサポートされており、通常はこれで十分です）。 特に難しい場合は、 float: left



（または、右揃えが必要な場合はfloat: right



を試すことができますが、この場合、要素の順序は逆になり、JSコードも追加する必要があります）。

リストのバグ（IE7以下）

リストを他の目的に使用することがよくあります。たとえば、一連の水平リンクやドロップダウンメニュー項目を作成するためです。 しかし、この問題の解決策を見つけることができなかったため、今回はマークアップを変更する必要がありました。 IE7（およびエミュレーションモードのIE8）は、すべての項目の左側にパディングを追加します。 この場合、コンテナのpadding



はゼロmargin



、 <li>



要素のmargin



同じで、26ピクセルの固定距離がoffset



として（ margin



左に）インスペクターに表示されます。 同時に、CSSを削除することはできません（または、その方法を見つけられませんでした）。



UPD： andy128kは問題の解決策を提案しましたlist-style-position: outside



リスト項目にlist-style-position: outside



を設定する必要があり、インデントは消えます。

独自の機能をプロトタイプに組み込むことの難しさ（IE8以下）

Chrome、Opera、Firefoxなどのブラウザーでは、HTMLElementオブジェクトを介してプロトタイプ要素にプロパティを追加できます。 IE 8でこれを実行しようとすると、例外が発生します。この名前でifを記述しただけでも、 try {}



ブロックを使用する必要があります。 ただし、Elementオブジェクトは同様の機能を実行します。 しかし、IE7ではこれはできません。 確かにObject.prototypeにプロパティを追加できます-しかし、これはあまり良いやり方ではありません、私の意見では。 したがって、IE7のサポートが必要で、混合機能があまり多くない場合は、ドット構文をまったく放棄する方が簡単です。 そして、 obj.addClass(className)



代わりにobj.addClass(className)



addClass(obj, className)



ようなものを書きます。

nextElementSiblingとpreviousElementSiblingの欠如（IE7以下）

はい、はい、これらのプロパティも存在しません。 絶対に。 もちろん、移動できる子コレクションがありますが、次の要素を取得する必要がある多くの場所では、1行で愚かなwhile()



ループを使用し、nextSibling / previousSiblingを繰り返して、目的のクラスの要素を見つけるか、nodeTypeが1に等しくなる必要があります。 対応するバージョンのIEでは、 nextSibling



およびpreviousSibling



テキストノードをスキップするだけであることに注意してください。 他のブラウザでのみ、これはそうではなく、単純な置換を行うと、クロスブラウザの互換性はすぐに消えます（IEを除くすべての場所でコードが機能しなくなります）。

JSONオブジェクトの欠落（IE7以下）

ここではすべてが単純です-パーサー/エンコーダーを作成します（残念ながら、これはそれほど難しくありません）。 サーバーなどのデータソースが信頼されている場合は特に、 eval



を使用できます。 しかし、知識のある人はとにかくこれを行うことをお勧めしません:)

HTTPSを使用した予期しないレーキ（IE7以下）

私のプロジェクトでは、HTTPSプロトコルを介してAPIを介してサードパーティリソースからのデータを使用しています。 仮想マシンの実際のIE7で、IE7エミュレーションモードのIE8で美しく受信したJSONPを介してデータを受信しなかったときの驚きを想像できます。 私はそれが何だったのかわかりませんが、サポートされている暗号のセットに何かがあるようです-サーバーは単に接続を確立することを許可していません。 これは簡単に確認できました。新しいタブで必要なアドレスを開くと、SSLエラーが表示されました。 そして、同じエラーは、そのサイトのページを開くときに発生しました。 興味深いことに、IE7とIE8の設定の暗号化プロトコルは同じです：SSL 2.0（チェックなし）、SSL 3.0、TLS 1.0。 「プログラムについて」ウィンドウのキーの長さは、あちこちで128ビットです。 しかし、何らかの理由で、IE7サーバーはお粗末です。 誰かがこの現象の理由を知っているなら-コメントに書いてください。

その他の選択装置

何らかの方法で選択を操作する必要がある場合-問題ではありません。選択はWebページ上、 input



またはtextarea



で行われinput



textarea



は別のコードが必要です。 一般的なケースでははるかに複雑だったというわけではありませんが、単純な状況（「テキストボックスのカーソル位置にテキストを挿入する」など）では、アプローチはあまり明確ではなく、より深い知識が必要です。



インターネットでは、クロスブラウザでタグにテキストをタグ付けしたり、テキストを任意の位置に挿入したりするコードのバリエーションが多くあります（基本的に非常によく似ています）。 私のバージョンは、どこかからコピーして、実際にはテストしていませんでした（Operaで開発しているため）、動作しませんでした。 先日、有名なフォーラムで正しいバージョンが見つかりました。その作者は集合的です。 一般に、私はそれとは何の関係もありませんが、ここでは大幅に縮小および単純化された形式で説明します（アイデアが明確で、余分なものがないように）。

  if (detectIE() < 9) { window.sel = null var f = function() { window.sel = document.selection.createRange().duplicate() } document.getElementById('inputField').onselect = f document.getElementById('inputField').onkeyup = f document.getElementById('inputField').onclick = f } function tagSelectedText(obj, tag) { if (document.selection) { if (!window.sel) return document.getElementById('inputField').focus() var sel = window.sel var len = sel.text.length sel.text = '<' + tag + '>' + sel.text + '</' + tag + '>'; if (len == 0) sel.moveEnd('character', -(tag.length+3)); sel.select(); } // ...    }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

考えは、目に見えない選択オブジェクトがあることです（多くの場合、単数形ではなく、これは、すべてのRangeを適切にドロップせずにプログラムでJSでこれを行う前に、マウスで何かを選択すると、Operaで表示されることがあります）。 しかし、フィールドがフォーカスを失うとすぐに消えます。 さらに、重複の機能を割り当てるのは無意味です：遅すぎます。 したがって、onselect。 onkeyupとonclickは、矢印またはマウスクリックでフィールドにカーソルを入力または移動するときに、空の選択（長さゼロ）を維持するために必要です。



ボタンを押した瞬間に、保存されたオブジェクトを取得し、保存されたオブジェクトのプロパティを使用して、実際の選択オブジェクトのtext



プロパティを更新しtext



。 必要に応じて、カーソルを移動します。 select()



を呼び出すことを忘れないでください-結果がブラウザに表示されるようにこれを行うことが重要です。

ブレーキは時々論理エラーを明らかにする

JavaScriptコード内の1つの場所（オーディオプレーヤーインターフェースが作成される場所）で、JSONPを介して外部サーバーに要求が行われました。 ハンドラー関数は、要求に対する応答に基づいて計算されたIDで目的のプレーヤー（要求が作成されたときにcreatePlayer()



関数で使用されたcreatePlayer()



、同じ回答から計算されたトラックURLの属性を割り当てました。 IE8を含むすべての場所で、すべてが正常に機能し、意図したとおりに機能しました。 IE7では、JSONPを介して呼び出された関数は、プレーヤーのコンテナーオブジェクトをIDで取得できませんでした。



問題は、 getElementByID()



を呼び出した時点で、メッセージを作成したcreateMessage()



呼び出しの後にあるappendChild()



メソッドを使用して、プレーヤーのコンテナーが置かれてgetElementByID()



メッセージコンテナーが目的の場所にまだ追加されていないことでした しかし、それはすでに存在し、idには正しいものがありました。 実際、 createElement()



をcreateElement()



作成された要素にはすぐにアクセスできません。 これは正常です。 そしてもちろん、DOMに要素を追加してからアクセスする必要があります。 ただし、通常は最初にすべてのハンドラーを割り当て、要素に子ノードを入力してから、追加します。 したがって、関数ハンドラーのコードが未知の瞬間にトリガーされたことは残酷な冗談であり、IE7ではこの瞬間までにメインスレッドの実行はまだ完了していません（またはDOMは更新されませんでした）。

DOMを操作する機能は、ロジックのエラーも明らかにします

ここでは、すべてがある程度より興味深いものでした。 xPlayerライブラリには、「リスナー」を接続および削除する機能があります（開発中、必要に応じて特別に行われましたが、必要でした）。 この機能は、プレーヤーコントローラー（メッセージに表示されるプレーヤー）をページ上部のマスタープレーヤーに接続するために使用されました。 マスタープレーヤーを使用すると、再生コントロールにアクセスしながら、通信をスクロールしたり、部屋を切り替えることもできます。 トラックが開始された部屋に戻ると（または開始されたメッセージブロックをロードすると）、必要なコントローラーが初期化されたときに「ピックアップ」されます。 コントローラーの初期化コードは、URLとトラックの名前から形成された特別なuidをマスターのuidと比較し、それらの一致により、このコントローラーが「同じ」であると結論付けます。 さらに、すべてのコントローラーは、例外なく、作成時に、さまざまなイベントでUIを更新する一連の関数を備えています。 そして、これらの機能はウィザードで「リスナー」として登録されます。



IE8は予期しないエラーを明らかにしました-別の部屋に移動した後、リスナー関数は実行を継続し、表示領域のinnerHTML



クリアした後にドキュメントから削除されclientWidth



要素のclientWidth



を決定しようとするとクラッシュします！



一方では、関数の登録時に要素参照がコンテキストとして渡され、ガベージコレクターはオブジェクトがDOMの一部ではなくなっても、オブジェクトを破棄してはなりません。 しかし、これは他のブラウザにあります-ここでは、オブジェクトが破棄されただけで、 clientWidth



プロパティclientWidth



すでにnullポインタから取得clientWidth



れているようです。 他のブラウザはコンソールにエラーを表示せず（ clientWidth



が0であり、オブジェクトはすべての子孫とともにDOMの外に存在した可能性が高い）、古い部屋に戻ったときにすべて正常に機能しました。



ここで、戻るとき、コントローラースケールは「ピックアップ」されず、マスタープレーヤースケールはこの間ずっと更新され続けました（更新機能はsetInterval()



を介して再生が開始されるときに割り当てられ、リストのすべてのリスナー関数がそこから起動されます）。



明らかに、更新機能自体は機能しましたが、リスナー機能は機能しませんでした。 問題は、前の部屋に戻ったときに新しいリスナー関数が（新しいオブジェクトを参照して）リストに追加されたが、キューに到達する時間がなかったことが原因である可能性が最も高かった。間違い。 そして、間違いは非常にありふれたものです-部屋を変更するときは、リスナー関数のリストをクリアする必要があります:)



ところで、この問題は解決されています。

とりわけセキュリティ（IE8以下）

おそらく、インターフェース開発に多かれ少なかれ取り組んできた人なら誰でも、 file



ようなinput



スタイルを設定する簡単なトリックを知っているでしょう。 非表示にするだけで十分です。ボタンの役割を果たす任意の要素をクリックして、呼び出しを行うハンドラー関数をハングアップします。

 input.click()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

しかし、IE8以前のバージョンでは、この方法で選択されたファイルを使用してフォームを送信しようとすると（たとえば、 onchange



ハングするform.submit()



呼び出しを通じて）、エラーが発生します。







マイクロソフトは、これは安全でない操作であると考えているため、手がかりを与えてくれます。 したがって、Internet ExplorerのスタイルをInternet Explorerで通常の方法で設定することはできません。 ちなみに、フォームを送信する前にJSで表示できるようにしても、何も変わりません。 入力を直接クリックするだけでファイルが選択されている必要があります。 したがって、唯一の方法はfilter: alpha(opacity=0)



で入力を透明にし、その下に様式化されたボタンを配置することです。 次に、ユーザーは実際の（透明な）入力をクリックします。

IE6はどうですか？

IE6では、すべてが悪いです。







開発者としてこのブラウザを実際に使用したことはありませんでした-私は年齢のために幸運ではありませんでした。 しかし、一般的に異なるブロックモデルが存在することを簡単にどこかで読みました。一般に、松葉杖が必要です。 これまでのところ、IE6のすべては、未指定のDOCTYPEを使用したIE7（いわゆる互換モード）、またはIE8のエミュレーションモード「IE7：互換モード」と同じように見えます。



しかし、状況を少しでも修正するために、誰かがスタイルで書く必要があるアイデアを持っているなら、私は感謝します。

---

さらに、イベントの処理はどこでもクロスブラウザで行われることを忘れないでください（そうしないと、コードが落ちて何も起こりません）、それが重要な要素の丸いコーナーは、写真で実行される必要があります（または少なくとも代替として写真があります）フォールバック）。 さらに、滑らかな外観と透明度によるフェードの効果を持つオブジェクトには、フォントのスムージングがありません（ただし、 display



block



に設定される前にフィルターを割り当て、効果が完了した後にフィルターを完全に削除することで、このバグを回避できます）。



まあ、結局のところ、本格的なWebアプリケーションの動作は非常に遅くなります（通常のカスタムスクロールでも速度が遅くなり、コンテンツの量はそれほど多くありません）。 ただし、少なくともこれらすべての条件が満たされている場合、結果はグレースフルデグラデーションと呼ばれます。 おそらく。