Auswählen eines Elements in iFrame jQuery

122

In unserer Anwendung analysieren wir eine Webseite und laden sie auf eine andere Seite in einem iFrame. Alle Elemente auf dieser geladenen Seite haben ihre Tokenid-s. Ich muss die Elemente nach diesen Tokenid-s auswählen. Mittel - Ich klicke auf ein Element auf der Hauptseite und wähle das entsprechende Element auf der Seite im iFrame aus. Mit Hilfe von jQuery mache ich das folgendermaßen:

function selectElement(token) {
     $('[tokenid=' + token + ']').addClass('border'); 
}

Mit dieser Funktion kann ich jedoch nur die Elemente auf der aktuellen Seite auswählen, nicht im iFrame. Kann mir jemand sagen, wie ich die Elemente im geladenen iFrame auswählen kann?

Vielen Dank.

javascript iframe getelementbyid Cycero
quelle

Antworten:

157 
var iframe = $('iframe'); // or some other selector to get the iframe
$('[tokenid=' + token + ']', iframe.contents()).addClass('border');

Beachten Sie auch, dass srcSie aus Sicherheitsgründen nicht auf den Inhalt dieses Iframes in Javascript zugreifen können , wenn dieser Iframe auf eine andere Domäne verweist.

Darin Dimitrov
quelle
8
Beachten Sie, dass $ ('iframe') den iframe nicht direkt zurückgibt. Sie müssen es aus dem Array ziehen.
McKayla
Vielen Dank für die Hilfsbereitschaft. Das scheint aber nicht zu funktionieren.
Cycero
3
@cycero, es sollte funktionieren. Generieren Sie diesen Iframe dynamisch? Vergessen Sie nicht, dass Sie aus Sicherheitsgründen nicht auf den Inhalt zugreifen können, wenn Sie das src-Element dieses Iframes auf eine andere Domain als Ihre verweisen.
Darin Dimitrov
Ich lade es nicht aus einer anderen Domain, sondern aus demselben Ordner. Der iFrame-Inhalt wird dynamisch generiert und als Datei auf dem Server gespeichert. Dann wird diese Datei in iFrame geladen.
Cycero
@cycero, ich habe meine Antwort aktualisiert. Versuchen Sie zu besteheniframe.contents()
Darin Dimitrov
52

Schauen Sie sich diesen Beitrag an: http://praveenbattula.blogspot.com/2009/09/access-iframe-content-using-jquery.html

$("#iframeID").contents().find("[tokenid=" + token + "]").html();

Platzieren Sie Ihren Selektor in der Suchmethode.

Dies ist jedoch möglicherweise nicht möglich, wenn der Iframe nicht von Ihrem Server stammt. Andere Beiträge sprechen von Fehlern, denen die Berechtigung verweigert wurde.

jQuery / JavaScript: Zugriff auf den Inhalt eines Iframes

Kevin Bowersox
quelle
Das funktioniert, um den HTML-Code des Elements abzurufen. Wie kann ich dem ausgewählten Element jedoch eine CSS-Klasse hinzufügen? $ ("# iframeDiv"). content (). find ("[tokenid =" + token + "]"). addClass ("border"); scheint nicht zu funktionieren.
Cycero
1
Erhalten Sie Fehler, denen die Berechtigung verweigert wurde? Können Sie mir das HTML des Iframes geben?
Kevin Bowersox
Nein, keine Erlaubnis verweigert Probleme.
Cycero
20

Wenn Ihr Dokument fertig ist, bedeutet dies nicht, dass auch Ihr Iframe bereit ist.
Sie sollten also das Ereignis zum Laden des Iframes abhören und dann auf Ihre Inhalte zugreifen:

$(function() {
    $("#my-iframe").bind("load",function(){
        $(this).contents().find("[tokenid=" + token + "]").html();
    });
});
Fareed Alnamrouti
quelle
-3

Wenn der Fall über die Konsole auf den IFrame zugreift, z. B. Chrome Dev Tools, können Sie einfach den Kontext der DOM-Anforderungen per Dropdown-Liste auswählen (siehe Abbildung).

Chrome Dev Tools - Auswahl des iFrame

Tibersky
quelle
-9

Hier ist eine einfache JQuery, um dies zu tun, damit div nur in Containern ziehbar ist:

$("#containerdiv div").draggable( {containment: "#containerdiv ", scroll: false} );
Rajasekharreddy Kadasani
quelle