document.bodyが私のreadyStateロジックでnullになるのはなぜですか？

Question

iframe要素をできるだけ早くdocument.bodyに追加しようとしています。

エラーレポートは、Chrome、Safari、FF、IE - さまざまなバージョンのすべての4つの主要ブラウザで表示されますが、document.bodyはnullです。 JSファイルがキャッシュされてすぐに読み込まれると、これが起こると思います。ここで

はiframeを挿入するためのロジックです：

private loadIFrame(): void { 
    switch (document.readyState) { 
    case 'uninitialized': 
    case 'loading': 
    case 'loaded': 
     window.addEventListener('DOMContentLoaded', 
     this.appendIFrame.bind(this) 
    ) 
     break 
    case 'interactive': 
    case 'complete': 
    default: 
     this.appendIFrame() 
    } 
} 

private appendIFrame(): void { 
    if (document.getElementById('iframeId')) { 
    return 
    } 

    let iFrame: HTMLIFrameElement = document.createElement('iframe') 
    iFrame.src = document.location.protocol + this.ORIGIN + '/iframe.html' 
    iFrame.id = 'iframeId' 

    // document.body is null here 
    document.body.appendChild(iFrame) 
} 

私は、これは野生で出起こるか推測する私の葉クリーンな環境で問題を再現に苦労しています。

私はもともとrreadyStateロジックを試しましたが、loadingの状態では、はundefinedでした。問題はdefaultケース尋問の私の現在の行

private loadIFrame(): void { 
    switch (document.readyState) { 
    case 'uninitialized': 
    case 'loading': 
     window.addEventListener('DOMContentLoaded', 
     this.appendIFrame.bind(this) 
    ) 
     break 
    case 'loaded': 
    case 'interactive': 
    case 'complete': 
    default: 
     this.appendIFrame() 
    } 
} 

....

1. ですか？イベントリスナーを追加する必要がありますか？イベントリスナーがデフォルトになるように、ケースの順序を変更できますか？
2. DOMContentLoadedイベントでbodyはnullですか？
3. document.readyStateの他の値が落ちている可能性はありますか？

Answer 1

私は、ロジックを更新し、私はほとんどエラーを排除するが、私はまだreadyStateがinteractiveときdocument.bodyがnullで見ていすることができました。

問題を引き起こす特定のブラウザのシナリオを評価したら、この記事を更新します。

private loadIFrame(): void { 
    switch (document.readyState) { 
    case 'uninitialized': 
    case 'loading': 
    case 'loaded': 
     document.addEventListener('DOMContentLoaded', 
     this.appendIFrame.bind(this) 
    ) 
     break 
    case 'interactive': 
    case 'complete': 
    default: 
     if(document.body) { 
     this.appendIFrame() 
     } else { 
     window.addEventListener('load', 
      this.appendIFrame.bind(this) 
     ) 
     } 
    } 
} 

Answer 2

まず、あなたはすでにreadyStateをチェックしているし、それがloadedであることが決定している、なぜあなたは既に（DOMContentLoaded）を通過した瞬間のイベントハンドラを設定している場合はどうなりますか？あなただけ行うことができ

：

private loadIFrame(): void { 
    switch (document.readyState) { 
    case 'uninitialized': 
    case 'loading': 
    case 'loaded': 
     this.appendIFrame.bind(this); 
     break; 
    case 'interactive': 
    case 'complete': 
    default: 
     this.appendIFrame(); 
    } 
} 

次へ]を、あなたのイベントハンドラの登録が間違っています。そこ.addEventListener()から3つの引数であり、第三は、2つの値のいずれかとすることができる。

1. イベント名（文字列）

2. コールバック関数（参照またはインライン関数）

   3A。キャプチャフェーズにフックするかどうか（ブール値 - デフォルトでfalse）

   3bです。オプションは

そして、addEventListener()自体がイベント（この場合はwindowを）受け取るオブジェクトで呼び出される特性（オブジェクト）を設定するオブジェクト。

それは次のようになります。

window.addEventListener('DOMContentLoaded', function(){ 
     this.appendIFrame.bind(this); 
    }); 

また（FYI）、あなたは本当に手動でバグの原因となるエッジケースがあるとして、自動挿入に依存している文のセミコロンのあなたの終わりを挿入してはいけません。