Wie greife ich mit jQuery auf den Inhalt eines Iframes zu?

116

Wie kann ich mit jQuery auf den Inhalt eines Iframes zugreifen? Ich habe es versucht, aber es würde nicht funktionieren:

Iframe-Inhalt: <div id="myContent"></div>

jQuery: $("#myiframe").find("#myContent")

Wie kann ich darauf zugreifen myContent?

Ähnlich wie bei jquery / javascript: Zugriff auf den Inhalt eines Iframes, aber die akzeptierte Antwort ist nicht das, wonach ich gesucht habe.

jquery iframe mbillard
quelle
Ich habe gerade festgestellt, dass die in der Firefox-Konsole integrierte $ -Variable überhaupt nicht wie eine vollständige jQuery aussieht. (Ich habe das herausgefunden, nachdem ich festgestellt hatte, dass ich auch die Variable jQuery nicht habe, und dann herausgefunden, dass ich den Quellcode von jQuery nicht geladen habe.)
Aal Gheez

Antworten:

214

Sie müssen die contents()Methode verwenden:

$("#myiframe").contents().find("#myContent")

Quelle: http://simple.procoding.net/2008/03/21/how-to-access-iframe-in-jquery/

API-Dokument: https://api.jquery.com/contents/

mbillard
quelle
3
gib mir Fehler: Fehler: Erlaubnis verweigert, auf Eigenschaft 'ownerDocument' zuzugreifen
Imran Khan
26
ime: Es gibt wahrscheinlich einen Fehler aus folgenden Gründen: 1) Iframe gehört nicht zur selben Domain. 2) Sie versuchen, es vor dem Iframe-Ladeereignis zu lesen.
iMatoria
1
Gibt es eine Möglichkeit, zu überprüfen, ob der Iframe-Inhalt aus derselben Domäne stammt, bevor Sie versuchen, darauf zuzugreifen, und eine Fehlermeldung erhalten?
Kamafeather
2
Die Quell-URL ist fehlerhaft.
karthzDIGI
1
@jperezmartin: Sie müssen eine Javascript-Bibliothek verwenden, die Informationen zwischen Hauptseite und Iframe überträgt. Grundsätzlich wurde es vom Browser aufgrund der Cross-Browser-Funktionalität abgelehnt. Es tut mir leid, mir ist eine solche Bibliothek nicht bekannt, weil ich sie nie benötigt habe.
iMatoria
21 
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript">

$(function() {

    //here you have the control over the body of the iframe document
    var iBody = $("#iView").contents().find("body");

    //here you have the control over any element (#myContent)
    var myContent = iBody.find("#myContent");

});

</script>
</head>
<body>
  <iframe src="mifile.html" id="iView" style="width:200px;height:70px;border:dotted 1px red" frameborder="0"></iframe>
</body>
</html>
andres descalzo
quelle
15

Wenn die Quelle von iframe eine externe Domäne ist, verbergen Browser den Inhalt von iframe (Same Origin Policy). Eine Problemumgehung besteht darin, den externen Inhalt in einer Datei zu speichern, z. B. (in PHP):

<?php
    $contents = file_get_contents($external_url);
    $res = file_put_contents($filename, $contents);
?>

Holen Sie sich dann den neuen Dateiinhalt (String) und analysieren Sie ihn beispielsweise in HTML (in jquery):

$.get(file_url, function(string){
    var html = $.parseHTML(string);
    var contents = $(html).contents();
},'html');
fireb86
quelle