Clever Geek Handbook

IEのiframeとDOMの元のバグ

少し前に、IEで興味深いバグを発見しました。これは8番目のバージョンまで正常に生き残りました。 バグの本質は、複数のiframeを含むページを離れ、戻るボタンを使用して戻ると、これらのフレームのコンテンツが混在する可能性があることです。



UPD：彼らはこのコードのFFとOperaも刈っていると言いますが、別の方法で:)



この理由は、スクリプトを使用したドキュメントツリーの操作です。 より正確には、オブジェクトのiframeをドキュメント内の別の場所に転送し、フレームの線形順序を変更します。



いくつかの調査の後、次のパターンが明らかになりました。

  1. ページを離れると、IEは現在の（変更された）ドキュメントツリーをバイパスするフレーム内のリンクを記憶します
  2. ページに戻ると、ソースツリーでフレームが検索され、最後のステップで保存されたアドレスがフレームにロードされます。 フレームの順序が異なるため、おweができます
  3. スクリプトがトリガーされ、フレームが所定の位置に収まりますが、それらのコンテンツは既に混合されています


いつものように、1つの例は1000回の説明よりも優れています。 次のページで、「リンクのテスト」をクリックしてから戻ってください。

Copy Source | Copy HTML < html >< body > < div id ="container"> < iframe src ="http://google.com/" id ="frame1"></ iframe > < iframe src ="http://microsoft.com/"></ iframe > < iframe src ="http://habrahabr.ru/"></ iframe > </ div > < div >< a href ="http://google.com/"> Test link </ a ></ div > < script type= "text/javascript" > document.getElementById( "container" ).appendChild(document.getElementById( "frame1" )); </ script > </ body ></ html >



  1. Copy Source | Copy HTML < html >< body > < div id ="container"> < iframe src ="http://google.com/" id ="frame1"></ iframe > < iframe src ="http://microsoft.com/"></ iframe > < iframe src ="http://habrahabr.ru/"></ iframe > </ div > < div >< a href ="http://google.com/"> Test link </ a ></ div > < script type= "text/javascript" > document.getElementById( "container" ).appendChild(document.getElementById( "frame1" )); </ script > </ body ></ html >



  2. Copy Source | Copy HTML < html >< body > < div id ="container"> < iframe src ="http://google.com/" id ="frame1"></ iframe > < iframe src ="http://microsoft.com/"></ iframe > < iframe src ="http://habrahabr.ru/"></ iframe > </ div > < div >< a href ="http://google.com/"> Test link </ a ></ div > < script type= "text/javascript" > document.getElementById( "container" ).appendChild(document.getElementById( "frame1" )); </ script > </ body ></ html >



  3. Copy Source | Copy HTML < html >< body > < div id ="container"> < iframe src ="http://google.com/" id ="frame1"></ iframe > < iframe src ="http://microsoft.com/"></ iframe > < iframe src ="http://habrahabr.ru/"></ iframe > </ div > < div >< a href ="http://google.com/"> Test link </ a ></ div > < script type= "text/javascript" > document.getElementById( "container" ).appendChild(document.getElementById( "frame1" )); </ script > </ body ></ html >



  4. Copy Source | Copy HTML < html >< body > < div id ="container"> < iframe src ="http://google.com/" id ="frame1"></ iframe > < iframe src ="http://microsoft.com/"></ iframe > < iframe src ="http://habrahabr.ru/"></ iframe > </ div > < div >< a href ="http://google.com/"> Test link </ a ></ div > < script type= "text/javascript" > document.getElementById( "container" ).appendChild(document.getElementById( "frame1" )); </ script > </ body ></ html >



  5. Copy Source | Copy HTML < html >< body > < div id ="container"> < iframe src ="http://google.com/" id ="frame1"></ iframe > < iframe src ="http://microsoft.com/"></ iframe > < iframe src ="http://habrahabr.ru/"></ iframe > </ div > < div >< a href ="http://google.com/"> Test link </ a ></ div > < script type= "text/javascript" > document.getElementById( "container" ).appendChild(document.getElementById( "frame1" )); </ script > </ body ></ html >



  6. Copy Source | Copy HTML < html >< body > < div id ="container"> < iframe src ="http://google.com/" id ="frame1"></ iframe > < iframe src ="http://microsoft.com/"></ iframe > < iframe src ="http://habrahabr.ru/"></ iframe > </ div > < div >< a href ="http://google.com/"> Test link </ a ></ div > < script type= "text/javascript" > document.getElementById( "container" ).appendChild(document.getElementById( "frame1" )); </ script > </ body ></ html >



  7. Copy Source | Copy HTML < html >< body > < div id ="container"> < iframe src ="http://google.com/" id ="frame1"></ iframe > < iframe src ="http://microsoft.com/"></ iframe > < iframe src ="http://habrahabr.ru/"></ iframe > </ div > < div >< a href ="http://google.com/"> Test link </ a ></ div > < script type= "text/javascript" > document.getElementById( "container" ).appendChild(document.getElementById( "frame1" )); </ script > </ body ></ html >



  9. Copy Source | Copy HTML < html >< body > < div id ="container"> < iframe src ="http://google.com/" id ="frame1"></ iframe > < iframe src ="http://microsoft.com/"></ iframe > < iframe src ="http://habrahabr.ru/"></ iframe > </ div > < div >< a href ="http://google.com/"> Test link </ a ></ div > < script type= "text/javascript" > document.getElementById( "container" ).appendChild(document.getElementById( "frame1" )); </ script > </ body ></ html >



  10. Copy Source | Copy HTML < html >< body > < div id ="container"> < iframe src ="http://google.com/" id ="frame1"></ iframe > < iframe src ="http://microsoft.com/"></ iframe > < iframe src ="http://habrahabr.ru/"></ iframe > </ div > < div >< a href ="http://google.com/"> Test link </ a ></ div > < script type= "text/javascript" > document.getElementById( "container" ).appendChild(document.getElementById( "frame1" )); </ script > </ body ></ html >



  11. Copy Source | Copy HTML < html >< body > < div id ="container"> < iframe src ="http://google.com/" id ="frame1"></ iframe > < iframe src ="http://microsoft.com/"></ iframe > < iframe src ="http://habrahabr.ru/"></ iframe > </ div > < div >< a href ="http://google.com/"> Test link </ a ></ div > < script type= "text/javascript" > document.getElementById( "container" ).appendChild(document.getElementById( "frame1" )); </ script > </ body ></ html >



  12. Copy Source | Copy HTML < html >< body > < div id ="container"> < iframe src ="http://google.com/" id ="frame1"></ iframe > < iframe src ="http://microsoft.com/"></ iframe > < iframe src ="http://habrahabr.ru/"></ iframe > </ div > < div >< a href ="http://google.com/"> Test link </ a ></ div > < script type= "text/javascript" > document.getElementById( "container" ).appendChild(document.getElementById( "frame1" )); </ script > </ body ></ html >







ところで、バグはIEでのみ複製され、（興味深いことに）Microsoftサイトの1つで最初に発見されたようです:)


More articles:


All Articles