Was ist der prägnanteste browserübergreifende Weg, um auf ein <iframe> Elementfenster und Dokument zuzugreifen?

Question

Ich versuche herauszufinden, der beste Weg zum Zugriff auf Element window und document Eigenschaften von einer übergeordneten Seite. Die kann über JavaScript erstellt werden oder über eine Referenz zugegriffen werden, die in einer Objekteigenschaft oder einer Variablen gespeichert ist, so dass, wenn ich das richtig verstehe, die Verwendung von document.frames ausgeschlossen ist.

Ich habe gesehen, dass dies eine Reihe von Möglichkeiten, aber ich bin mir unsicher über die beste Vorgehensweise. Bei einer gegebenen auf diese Weise erstellt:

var iframe = document.createElement('iframe'); 
document.getElementsByTagName('body')[0].appendChild(iframe); 

Ich bin derzeit diese mit auf die document zuzugreifen, und es scheint, in den wichtigsten Browsern OK zu arbeiten:

var doc = iframe.contentWindow || iframe.contentDocument; 
if (doc.document) { 
    doc = doc.document; 
} 

Ich habe auch diese sehen Ansatz:

var iframe = document.getElementById('my_iframe'); 

iframe = (iframe.contentWindow) ? iframe.contentWindow : 
     (iframe.contentDocument.document) ? iframe.contentDocument.document : 
     iframe.contentDocument; 

iframe.document.open(); 
iframe.document.write('Hello World!'); 
iframe.document.close(); 

das hat mich verwirrt, da es das scheint, wenn iframe.contentDocument.document definiert ist, wirst du am Ende versucht iframe.contentDocument.document.document zugreifen .

Es gibt auch diese:

var frame_ref = document.getElementsByTagName('iframe')[0]; 

var iframe_doc = frame_ref.contentWindow ? frame_ref.contentWindow.document : 
    frame_ref.contentDocument; 

Am Ende, ich denke, ich bin verwirrt darüber, welche Eigenschaften halten, die Eigenschaften, ob contentDocument-document äquivalent ist, oder ob es eine solche Eigenschaft als contentDocument.document, etc .

mich auf eine genaue/rechtzeitige Bezug auf diese Eigenschaften, oder eine schnelle Einweisung geben Punkt auf jemand, wie effizient in einem Cross-Browser-Weg eines ‚s zugreifen window und document Eigenschaften (Kann ohne die Verwendung von jQuery o r andere Bibliotheken)?

Danke für jede Hilfe!

Answer 1

Alle modernen Browser mit Ausnahme von Chrome unterstützen iframereference.contentWindow und iframereference.contentDocument, aber nur, wenn die im iframe geöffnete Seite sich in derselben Domäne wie die Seite mit dem iframe befindet.

So schließen Sie Chrome verwenden var iwin=iframereference.contentWindow, idoc=iwin.document;

.contentDocument die window.document der Seite in der iframe ist, als contentWindow.document ist, aber nicht .contentDocument.document.

Chrome Unterstützung in irgendeiner Zukunft für .contentDocument umfassen kann version- Ich hoffe es, weil es all anderen Browser das in einem Objekt-Elemente enthält Dokument finden auch die Art und Weise, Art text/html, wo die Daten Attribut die URL eines ist HTML-Seite.

Answer 2

Es gibt einen einfacheren Weg, den es schon länger gibt ... Verwenden Sie window.frames, um einen Verweis auf das Fensterobjekt des Rahmens zu erhalten.

Nach dem Name oder ID:

var iframe_doc = window.frames.my_iframe.document; 

oder wenn Sie es vorziehen:

var iframe_doc = window.frames['my_iframe'].document; 

oder Index:

var iframe_doc = window.frames[0].document; 

gute Referenz für window.frames hier: http://developer.mozilla.org/en/DOM/window.frames

Ein Auszug:

jedes Element in dem window.frames pseudo-Array die zu den gegebenen < Rahmen entsprechenden Fenster Objekt repräsentiert > 's oder <iframe>' s Inhalt, nicht die (i) Rahmen-DOM-Element (d. h window.frames [0] ist die gleiche wie document.getElementsByTagName ( "iframe") [0] .contentWindow)

Answer 3

Während der Zeit, die ich viele Tests gemacht, und schließlich kam mit diesem kurzen, aber robuste Syntax, die auf jedem Browser funktioniert konnte ich Test:

             
  
    var doc = iframe.contentDocument ? iframe.contentDocument : (iframe.contentWindow.document || iframe.document); 
  

EDIT: @DaggNabbit bemerkt, dass ein Referenzfehler in iframe.contentWindow.document, wenn iframe.contentWindow nicht gesetzt ist, die Codeausführung blockieren würde, nicht iframe.document erlaubt werden zurückgegeben .
So raffiniert ich meinen Code:

var doc = iframe.contentDocument ? 
    iframe.contentDocument : 
    (iframe.contentWindow ? iframe.contentWindow.document : iframe.document); 

HINWEIS: iframe.document ist eine Abhilfe für IE5.

Answer 4

Ich denke, das ist ein sehr einfacher und Cross-Browser-Weg

//get document object of IFRAME 
if(typeof frame.contentDocument!='undefined') { 
    iframeDocument=frame.contentDocument; 
} else { 
    iframeDocument=frame.document; 
} 
//get window object of IFRAME 
if(typeof frame.contentWindow!='undefined') { 
    iframeWindow=frame.contentWindow; 
} else { 
    iframeWindow=frame.window; 
} 

können Sie testen es