Wie erhalte ich den Inhalt eines Iframes in Javascript?

154

<iframe id="id_description_iframe" class="rte-zone" height="200" frameborder="0" title="description">
  <html>
    <head></head>
    <body class="frameBody">
      test<br/>
    </body>
  </html>
</iframe>

Was ich bekommen möchte ist:

test<br/>

javascript html iframe Oh mein Gott
quelle

52

Wichtiger Hinweis: Sie können nicht auf den Inhalt eines iFrames zugreifen, wenn dieser domänenübergreifend ist. Siehe Richtlinie für denselben Ursprung .

HellaMad

154

Die genaue Frage ist, wie es mit reinem JavaScript geht, nicht mit jQuery.

Aber ich verwende immer die Lösung, die im Quellcode von jQuery zu finden ist. Es ist nur eine Zeile natives JavaScript.

Für mich ist es das beste, leicht lesbar und sogar afaik der kürzeste Weg , um die iframes Inhalt zu erhalten.

Holen Sie sich zuerst Ihren Iframe

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

// or
var iframe = document.querySelector('#id_description_iframe');

Verwenden Sie dann die Lösung von jQuery

var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

Es funktioniert sogar im Internet Explorer, der diesen Trick während der contentWindowEigenschaft des iframeObjekts ausführt. Die meisten anderen Browser verwenden die contentDocumentEigenschaft. Aus diesem Grund prüfen wir diese Eigenschaft zuerst in dieser ODER-Bedingung. Wenn es nicht eingestellt ist, versuchen Sie es contentWindow.document.

Wählen Sie Elemente im Iframe aus

Dann können Sie normalerweise das DOM-Element verwenden getElementById()oder sogar querySelectorAll()auswählen aus iframeDocument:

if (!iframeDocument) {
    throw "iframe couldn't be found in DOM.";
}

var iframeContent = iframeDocument.getElementById('frameBody');

// or
var iframeContent = iframeDocument.querySelectorAll('#frameBody');

Rufen Sie Funktionen im Iframe auf

Holen Sie sich nur das windowElement von iframe, um einige globale Funktionen, Variablen oder ganze Bibliotheken aufzurufen (z. B. jQuery):

var iframeWindow = iframe.contentWindow;

// you can even call jQuery or other frameworks
// if it is loaded inside the iframe
iframeContent = iframeWindow.jQuery('#frameBody');

// or
iframeContent = iframeWindow.$('#frameBody');

// or even use any other global variable
iframeWindow.myVar = window.myVar;

// or call a global function
var myVar = iframeWindow.myFunction(param1 /*, ... */);

Hinweis

All dies ist möglich, wenn Sie die Richtlinie mit demselben Ursprung einhalten .

Algorithmus
quelle

2

Wenn der Name hier nicht definiert ist, sollten Sie entweder vollständigen Code schreiben oder jQuery nicht damit schreiben

Tarun Gupta

13

Bitte entschuldigen Sie, aber die Codezeile ist ein Auszug aus dem Abfragecode und der Codeblock ist mein eigener Beispielcode. Der Rest sollte sich jemand rausholen. Das einzige, was Sie vermissen, ist die Variable iframe. Und ich kann unmöglich wissen, wo sich Ihr Iframe befindet oder wie seine ID ist.

Algorithmus

5

Könnten Sie bitte oben in der Antwort eine Warnung einfügen, dass dies nicht funktioniert, wenn der Iframe eine Remote-SRC hat? Wenn ich falsch liege, würde ich mich freuen, wenn Sie mir zeigen könnten, wie ich den Iframe-Inhalt weiterhin erhalten kann, ohne eine weitere HTTP-Anfrage zu senden (nicht möglich, da Javascript ausgeführt werden muss, um den Iframe-Inhalt zu erstellen, und keinen bereitstellen möchte zweite Javascript-Umgebung, falls vermeidbar).

Zackline

1

Ich habe eine solche Warnung. Aber am Ende meiner Erklärung. Sie müssen die Richtlinien derselben Herkunft beachten. Das ist alles.

Algorithmus

2

Um das oben genannte zum Laufen zu bringen, musste ich es in document.querySelector('#id_description_iframe').onload = function() {... Hope einbinden, es hilft jemandem.

user3442612

71

Versuchen Sie Folgendes mit JQuery:

$("#id_description_iframe").contents().find("body").html()

Michael Adedayo
quelle

27

Es funktioniert nicht, weil "Domänen, Protokolle und Ports übereinstimmen müssen". : Unsicherer JavaScript-Versuch, auf Frame mit URL

zuzugreifen

2

Wie bereits erwähnt, würde es funktionieren, wenn die Domänen übereinstimmen. Zu Ihrer Information, ich habe gerade festgestellt, dass $ ("# id_description_iframe #id_of_iframe_body"). Html () in Chrome funktioniert, aber nicht in allen Firefox-Versionen, und daher ist die Verwendung der oben genannten in Ordnung. Dh $ ("# id_description_iframe #id_of_iframe_body"). Contents (). Find ("body"). Html () funktionierte in beiden

hobailey

41

es funktioniert perfekt für mich:

document.getElementById('iframe_id').contentWindow.document.body.innerHTML;

bizzr3
quelle

3

Es ist seltsam, aber für mich .bodyfunktioniert es nicht. Tut es .getElementsByTagName('body')[0]jedoch.

Jenny O'Reilly

Es ist nicht ".body", sondern nur "body". entferne den Punkt

Arjun

1

Dies sollte die Antwort sein, wenn Sie Vanille-Javascript verwenden.

Jovanni G

23

AFAIK, ein Iframe kann so nicht verwendet werden. Sie müssen das src-Attribut auf eine andere Seite verweisen.

Hier erfahren Sie, wie Sie den Körperinhalt mit altem Javascript ermitteln. Dies funktioniert sowohl mit IE als auch mit Firefox.

function getFrameContents(){
   var iFrame =  document.getElementById('id_description_iframe');
   var iFrameBody;
   if ( iFrame.contentDocument ) 
   { // FF
     iFrameBody = iFrame.contentDocument.getElementsByTagName('body')[0];
   }
   else if ( iFrame.contentWindow ) 
   { // IE
     iFrameBody = iFrame.contentWindow.document.getElementsByTagName('body')[0];
   }
    alert(iFrameBody.innerHTML);
 }

Jose Basilio
quelle

1

es tut auf Safari (dh Zweig)

Andrei Cristian Prodan

Bei einem domänenübergreifenden Problem wurde ein Frame mit dem Ursprung " someOther.com " für den Zugriff auf einen Cross-Origin-Frame gesperrt .

Lannyf

10

Verwendung contentin iframe mit JS:

document.getElementById('id_iframe').contentWindow.document.write('content');

KurseWeb
quelle

5

Ich denke, das Platzieren von Text zwischen den Tags ist Browsern vorbehalten, die keine Iframes verarbeiten können, z.

<iframe src ="html_intro.asp" width="100%" height="300">
  <p>Your browser does not support iframes.</p>
</iframe>

Sie verwenden das Attribut 'src', um die Quelle des iframes-HTML-Codes festzulegen ...

Hoffe das hilft :)

quelle

3

Der folgende Code ist browserübergreifend kompatibel. Es funktioniert in IE7, IE8, Fx 3, Safari und Chrome, sodass keine browserübergreifenden Probleme behandelt werden müssen. Nicht in IE6 getestet.

<iframe id="iframeId" name="iframeId">...</iframe>

<script type="text/javascript">
    var iframeDoc;
    if (window.frames && window.frames.iframeId &&
        (iframeDoc = window.frames.iframeId.document)) {
        var iframeBody = iframeDoc.body;
        var ifromContent = iframeBody.innerHTML;
    }
</script>

nekno
quelle

Das folgende HTML funktionierte für mich in Chrome 7 auf dem Mac. Ich habe diesen Originalbeitrag in Chrome 6 unter Windows getestet und er hat einwandfrei funktioniert. <html> <head> </ head> <body> <iframe id = "iframeId" name = "iframeId"> ... </ iframe> <script type = "text / javascript"> var iframeDoc; if (window.frames && window.frames.iframeId && window.frames.iframeId.document) {window.frames.iframeId.document.body.innerHTML = "<h1> testing </ h1>"; } </ script> </ body> </ html>

nekno

1

window.frames.iframeId.documentist für mich undefiniert. (Ubuntu 13.04, Chrome)

Ionică Bizău

2

Chalkey ist korrekt. Sie müssen das src-Attribut verwenden, um die Seite anzugeben, die im iframe enthalten sein soll. Wenn Sie dies tun und sich das Dokument im Iframe in derselben Domäne wie das übergeordnete Dokument befindet, können Sie Folgendes verwenden:

var e = document.getElementById("id_description_iframe");
if(e != null) {
   alert(e.contentWindow.document.body.innerHTML);
}

Natürlich können Sie dann mit den Inhalten etwas Nützliches tun, anstatt sie nur in eine Warnung zu versetzen.

Graham Clark
quelle

1

Um Körperinhalte aus Javascript zu erhalten, habe ich den folgenden Code ausprobiert:

var frameObj = document.getElementById('id_description_iframe');

var frameContent = frameObj.contentWindow.document.body.innerHTML;

Dabei ist "id_description_iframe" die ID Ihres Iframes. Dieser Code funktioniert gut für mich.

Sunakshi
quelle

2

Bitte setzen Sie Ihre Antwort immer in einen Kontext, anstatt nur Code einzufügen. Sehen Sie hier für weitere Details.

gehbiszumeis

1

Nur-Code-Antworten gelten als minderwertig: Stellen Sie sicher, dass Sie erklären, was Ihr Code tut und wie er das Problem löst. Es wird sowohl dem Fragesteller als auch zukünftigen Lesern helfen, wenn Sie Ihrem Beitrag weitere Informationen hinzufügen können. Siehe auch Erklären vollständig codebasierter

borchvm

Wie erhalte ich den Inhalt eines Iframes in Javascript?

Antworten: