序文

多くの場合、我々はそのような状況に遭遇します。

iframe内に別のページに埋め込まれたとき。iframeのロードページがより速く応答、多分私達は、同期ページの読み込みのうちに感じることはありませんが、必要性が非常に遅いの中に埋め込まれている場合、応答はiframeページで、想像した場合、どのような現象があるでしょうか？そして、全てのページが完成読み込みを持っていますが、そこになります

iframe要素では、埋め込まれたページが読み込まれるまで空白があるでしょう、このスペースは、新しくロードされたページが表示されます。一つは、長引く場合は空白のページは、閲覧者のために、それは何を意味することを想像することができます。ページに埋め込まれている場合、ロードされたメッセージを与えるために、完成したロードではありません。以下のような：「ページが読み込まれます

以下のように、私は、閲覧ユーザーにこのページを考える」で、それはもはや苦しみもないだろうが、また、視覚的に楽しむために。

この効果を達成するために、一般的に処理の原則に従っています。

iframeのロード領域は、フレンドリーなメッセージを与えます。
IFRAMEの読み込み、明確なメッセージを終了し、IFRAMEの表示をさせた場合。

これらは比較的容易であるが、重要な問題は、今すでにロードされているiframe要素内のページを監視する方法をです。

この問題の鍵となるのは、一般的には、解決策を議論するために2例に分割されます。

同所ネスティング：それは子供が親ページページメソッドを呼び出すようにするのが最善です。
エキゾチックネスティング：それはエキゾチックですが、サブページは、その後、変更することはできません場合は、次にはFirefoxの/オペラ/サファリ、あなたはインラインフレームを使用することができるイベントを直接ONLOAD;しかし、IEで、document.readystateでのサブページは、タイマー、または使用することによって決定することができますイベント計算onreadystatechangeにIFRAMEのイベントに応答しました。

これは、単純なiframeの親ページは次のようになります含まれています。

<！DOCTYPE ...> 
<HTMLのxmlns = " ... " > 
  <ヘッド> 
  の<meta ... /> 
  <タイトル>インラインフレーム</ TITLE> 
  <BODY> 
    <もしRAME名= "iframe1" ID = "iframe1 "幅=" 300"高さ= "50" SRC = "＃"> </ iframe>の
    <スクリプトタイプ= "テキスト/ javascriptの" > // ここにコード</スクリプト> 
  </ BODY> 
</ HTML>

スタート：

A、ネストされたドメインを持ちます

親ページのオブジェクトを呼び出します

parent.htmlの

関数ifrmLoaded（）{ 
    // コードここ
} 
sub.html 

window.onload = 関数（）{ 
    window.parent.ifrmLoaded（）。
}

短所：

子供の親ページは、同じドメイン内になければなりません

あなたが私たちのためにサブページを追加するコードのこの部分を担当する同僚に依頼することができ、または、ペアは、ページを変更する権利を持っている必要があります

ます。<script type =」text / javascriptの」>
　　もし（！window.parent = ウィンドウ）window.parent.iframeCall（）;
</ SCRIPT>

Window.onladは、前</ body>の上で直接にそれを置く、または。

注意事項[1]：同じドメイン内のフロントエンドプログラムはiframeウィンドウまたは他の特性が完全先天性の条件です。長い同じドメイン名のように、オブジェクトが異なるウィンドウ間など各ウィンドウ間で共有され、我々は再生する完全に無料で、乗車バックとされます。要するに、だけでは不可能ではない、と思います。

時には、自分のページを防止するために、以下を解決するために使用することができ、他の人を入れ子にされていません。

もし（！window.parent =ウィンドウ）window.parent.location = "http://hqlong.com" 。
// または
もし（！window.top =ウィンドウ）window.top.location = "http://hqlong.com" 。

第二に、エキゾチックなネストされた（またはサブページが既に存在して変更することができません）

異なるドメイン名のページでは、セキュリティ上の理由から、ブラウザは、ほぼ完全にページ間やからオブジェクトをブロック

エキゾチック、サブページ内のネストされたページでは、常にネスト防ぐために、親ウィンドウの直接の位置を変更することができますが、これの親ページには、それを助けることはできません。もちろん、サブページに加えて、ちょうど永遠外.location親ウィンドウを変更する権利、また他のを持っています。例えば、IEの中で、直接サブページの親ページを変更することができます

.location別のソース：

<スクリプトtyle =」テキスト/ javascriptの」> parent.location =」http://anotherPage.com/」; </ SCRIPT>

しかし、たとえLOCATION.HREF場所はアクセスすることはできませんなどのサブは、属性window.name、文書、などのアクセス他のオブジェクト、などをすることはできません。もちろん、ネスティングを防止する観点から、使用top.locationはより強力になります。

方法： onreadystatechangeに判断するために使用

[Firefoxの/オペラ/サファリは直接iframeのイベントをONLOAD使用します]

document.getElementById （ 'IFRM'）。onload = 関数（）{
     // ここでドキュメント 
}

【、すなわち、イベントonreadystatechangeに登録IFRAME]

iframe onreadystatechange事件

VAR oFrm = document.getElement ById（ 'IFRM' ）; 
oFrm.onreadystatechange = 関数（）{
     IF（this.readyState＆＃038;＆＃038; this.readyState == '完了' ）{ 
        onCompleteの（）。
    } 
}

タイマーテストdocument.readystateで

OFRMのdocument.getElementById = VAR（ 'IFRM'）; 
VAR fmState =関数（）{ 
    VAR状態= NULL; 
    IF（document.readystateで）{ 
        試み{ 
            STATE = oFrm.document.readyState; 
        }キャッチ（E）= {ヌル状態;} 
        （状態== "コンプリート"国家||！）{IF 
            onCompleteの（）; 
            戻り値; 
        } 
        window.setTimeoutは（fmState、10 ）; 
    } 
}; 
// 変更のsrcフォームターゲットまたはフォームを提出することによって、文が実行されます：
IF （fmState.TimeoutInt）window.clearTimeout（fmState.timeoutInt）; 
fmState.timeoutInt = window.setTimeoutは（fmState、400）。

ページが読み込まれるたびにiframeのは、対応する状態がロード、インタラクティブかつ完全である、イベントonreadystatechangeにプロセスに3回活性化され、最後は完了です。

質問：なぜ、400ミリ秒の遅延すべきか？

javascriptのDOM操作は非同期であるため、我々は次のステップを開始するDOM実装後に実行するスクリプトを待たなければなりません。この数は、応答速度やクライアントデバイスとブラウザに依存して400秒は、デバイスの応答速度がさらに高速10ミリ秒未満で良いことができますが、100ミリ秒の周りに、より人気があり、400ミリ秒は非常に保守的でなければなりません。要するに、ミリ秒単位の大多数は、より多くのユーザ機器の状態に合わせて、クライアントデバイスの負荷を軽減することができます。document.readystateで、参照するサブページ内docuent.readyStateはiframeではなく、親ページとして

質問2：なぜ試してみて、キャッチ？

IFRAMEが対話状態に到達するエキゾチック、サブページの場合には、親ページへのアクセスを失うことになる、それだけでこのステップに戻ることができますのでロードされ、不明なエラーIEはそう - 実際には、無権限なので、試してみますそして、キャッチ、エラーがサイレント行きましょう。

[互換性のあるハンドリングFirefoxの/オペラ/サファリ/ IEの]

VAR oFrm =のdocument.getElementById（ 'IFRM'）; 
oFrm.onload = oFrm.onreadystatechange =機能（）{ 
     場合（！this.readyState && this.readyState = '完全'）のリターン; 
     他{ 
         onCompleteの（）。
     } 
}

若しくは

= $ $のiFrameとVAR（ "IFrameの＃"）; 
$ iFrame.prop（ "SRC"、 "http://www.baidu.com"）; 
IF（！/ * @ @ aijquery * / 0）{  // もしないIE、IE条件注釈   
    $のiFrameおよび[0] .onload =関数（）{      
        アラート（ "ロード" ）;  
    };   
} 他{   
    $のiFrameおよび[0] .onready STATECHANGE =関数（）{  //  下IEこのノードは、onreadystatechangeにイベントを有する   
         （iframe.readyState == "完全"）{IF   
            アラート（ "ロード" ）;  
        }   
    };   
}

オプション2：分析のattachEvent

VAR $ iFrameの= $（ "＃IFrameの"）; 
$ iFrame.prop（ "SRC"、 "http://www.360.cn"）; 
IF（$のiFrame [0 ] .attachEvent）{  
       $ iFrameの[0] .attachEvent（ "オンロード"、F慰め（）{  //  IEの   
          　　　　警告（ "加载完毕" ）;  
      }）;  
}  他  {   
      $ iFrameの[ 0 ] .onload =関数（）{  //  非IEの   
          　　　　警告（ "加载完毕" ）。  
      }。  
}

方法3：使用荷重はjQueryので決定されます

VAR $ iFrameの= $（ "＃IFrameの"）;      
$ iFrame.prop（ "SRC"、 "http://www.aijquery.cn"）;    
$ iFrame.load（関数（）{        
    アラート（ "加载完毕"）;     
}）;

ご注意ください

あなたは、動的にはiframeを作成しなければならないか、または動的に追加のiframe srcがアドレスを指定上記のケースメソッドを使用します

参照

イベントリスナーのiframeロードが完了しています

jqueryのiFrameのは、フレームの3つの方法がロードされているかどうかが判断されます

リスニングウィンドウのIFRAME（c）はIFRAMEが終了ロードを持っている時にイベントリスナーを学びます

序文