Wie kann ich mit JavaScript/jQuery auf den Inhalt eines Iframes zugreifen?

Lesezeit: 6 Minuten

rz.

Ich möchte den HTML-Code in einem Iframe mit jQuery bearbeiten.

Ich dachte, ich könnte dies tun, indem ich den Kontext der jQuery-Funktion auf das Dokument des iframe setze, etwa so:

$(function(){ //document ready
    $('some selector', frames['nameOfMyIframe'].document).doStuff()
});

Dies scheint jedoch nicht zu funktionieren. Eine kleine Inspektion zeigt mir, dass die Variablen in frames['nameOfMyIframe'] sind undefined Es sei denn, ich warte eine Weile, bis der iframe geladen ist. Wenn der Iframe jedoch geladen wird, sind die Variablen nicht zugänglich (ich bekomme permission denied-Typfehler).

Kennt jemand eine Abhilfe dafür?

Was enthält der iFrame – ist sein src auf eine andere Domain eingestellt?

– James

14. Dezember 2008 um 0:32 Uhr
Wenn es sich um eine andere Domain handelt, gibt es immer noch eine Möglichkeit, auf deren Inhalt zuzugreifen oder ein Ereignis zu registrieren

– adardesign

1. Oktober 2009 um 15:59 Uhr
Nein, denn das wäre Cross-Site-Scripting, was aus Sicherheitsgründen verboten ist. Meine Lösung bestand darin, einen Proxy zu verwenden: den HTML-Code im IFRAME wortwörtlich durch meine eigene Site zu füttern, damit er aus Sicht des Browsers nicht mehr seitenübergreifend ist.

– reinierpost

6. April 2010 um 8:10 Uhr
Es ist browserübergreifender zu verwenden .contentWindow.document als .document auf der iframe Element. Ich schlage die Änderung oben vor.

– Allan H.

8. Juli 2011 um 20:04 Uhr
Eine Möglichkeit sind Chrome-Erweiterungen

– Muhammad Umer

16. April 2013 um 13:14 Uhr

Yasir Lagari

Wenn die <iframe> ist aus der gleichen Domäne, die Elemente sind leicht zugänglich wie

$("#iFrame").contents().find("#someDiv").removeClass("hidden");

Referenz

Es ist großartig, über die Richtlinie zur gleichen Herkunft Bescheid zu wissen, aber dies ist die Antwort, die das tut, was das OP wollte. Warum wurde die andere Antwort als die richtige ausgewählt?

– Jason Swett

24. November 2010 um 15:53 Uhr

Onur Bebin

Ich denke, was Sie tun, unterliegt dem gleiche Ursprungspolitik. Dies sollte der Grund sein, warum Sie bekommen Typ Berechtigung verweigert Fehler.

@Tracker1: Können Sie ein Framework/API/Designmuster für die Implementierung dieser Proxy-Lösung vorschlagen? Irgendwelche Links zu Beispielen oder Tutorials usw.? Ich habe versucht zu suchen, konnte aber keine finden.

– Umer Hayat

27. Juni 2012 um 12:26 Uhr

davryusha

Du könntest benutzen .contents() Methode von jQuery.

Die .contents() -Methode kann auch verwendet werden, um das Inhaltsdokument eines Iframes zu erhalten, wenn sich der Iframe auf derselben Domäne wie die Hauptseite befindet.

$(document).ready(function(){
    $('#frameID').load(function(){
        $('#frameID').contents().find('body').html('Hey, i`ve changed content of <body>! Yay!!!');
    });
});

Schmied

Wenn der iframe src von einer anderen Domäne stammt, können Sie dies immer noch tun. Sie müssen die externe Seite in PHP einlesen und von Ihrer Domain ausgeben. So was:

iframe_page.php

<?php
    $URL = "http://external.com";

    $domain = file_get_contents($URL);

    echo $domain;
?>

Dann so etwas:

display_page.html

<html>
<head>
  <title>Test</title>
 </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script>

$(document).ready(function(){   
    cleanit = setInterval ( "cleaning()", 500 );
});

function cleaning(){
    if($('#frametest').contents().find('.selector').html() == "somthing"){
        clearInterval(cleanit);
        $('#selector').contents().find('.Link').html('ideate tech');
    }
}

</script>

<body>
<iframe name="frametest" id="frametest" src="http://yourdomain.com/iframe_page.php" ></iframe>
</body>
</html>

Das Obige ist ein Beispiel dafür, wie Sie eine externe Seite über einen Iframe bearbeiten, ohne dass der Zugriff verweigert wird usw.

Benutzer

Verwenden

iframe.contentWindow.document

anstatt

iframe.contentDocument

Gute Antwort. Dies funktioniert für iFrames in anderen Domänen. Ich habe dies in der Konsole auf Safari und Firefox versucht.

– Aneil Mallavarapu

27. Dezember 2010 um 0:04 Uhr
Ich glaube, es funktioniert nur für andere Domains, wenn Sie es von der Konsole aus tun. Von einem Skript aus wird der Zugriff nicht zugelassen.

– Yinkrash

31. Mai 2011 um 15:58 Uhr
Dies sollte die akzeptierte Antwort sein. Hat mein Leben gerettet und funktioniert, wenn der Iframe aus einer anderen Domäne stammt; allerdings wie gesagt nur in der Konsole.

– Seidenfeuer

26. Februar 2014 um 8:47 Uhr
für mich funktioniert iframe.contentWindow.document nicht immer. und wenn dies nicht der Fall ist, habe ich festgestellt, dass $(elem).contents().get(0) dies tut

– elewinso

22. November 2018 um 13:02 Uhr
Sie können das “Root-Dokument” in der Browserkonsole auswählen. Wenn Sie “oben” auswählen, funktioniert dies nicht, da es sich um einen Cross-Origin-Zugriff handelt. Wenn Sie sich für den Zugriff im Namen des Iframe-Dokuments entscheiden, erhalten Sie natürlich Zugriff. Nur weil Sie kein Browser sind, sondern der Besitzer des Browsers.

– Sergej Kowalenko

3. September 2019 um 7:34 Uhr

Ich finde diesen Weg sauberer:

var $iframe = $("#iframeID").contents();
$iframe.find('selector');

Gute Antwort. Dies funktioniert für iFrames in anderen Domänen. Ich habe dies in der Konsole auf Safari und Firefox versucht.

– Aneil Mallavarapu

27. Dezember 2010 um 0:04 Uhr
Ich glaube, es funktioniert nur für andere Domains, wenn Sie es von der Konsole aus tun. Von einem Skript aus wird der Zugriff nicht zugelassen.

– Yinkrash

31. Mai 2011 um 15:58 Uhr
Dies sollte die akzeptierte Antwort sein. Hat mein Leben gerettet und funktioniert, wenn der Iframe aus einer anderen Domäne stammt; allerdings wie gesagt nur in der Konsole.

– Seidenfeuer

26. Februar 2014 um 8:47 Uhr
für mich funktioniert iframe.contentWindow.document nicht immer. und wenn dies nicht der Fall ist, habe ich festgestellt, dass $(elem).contents().get(0) dies tut

– elewinso

22. November 2018 um 13:02 Uhr
Sie können das “Root-Dokument” in der Browserkonsole auswählen. Wenn Sie “oben” auswählen, funktioniert dies nicht, da es sich um einen Cross-Origin-Zugriff handelt. Wenn Sie sich für den Zugriff im Namen des Iframe-Dokuments entscheiden, erhalten Sie natürlich Zugriff. Nur weil Sie kein Browser sind, sondern der Besitzer des Browsers.

– Sergej Kowalenko

3. September 2019 um 7:34 Uhr

Sie müssen ein Ereignis an den Onload-Handler eines Iframes anhängen und das darin enthaltene js ausführen, damit Sie sicherstellen können, dass der Iframe vollständig geladen ist, bevor Sie darauf zugreifen.

$().ready(function () {
    $("#iframeID").ready(function () { //The function below executes once the iframe has finished loading
        $('some selector', frames['nameOfMyIframe'].document).doStuff();
    });
};

Das obige wird das Problem „noch nicht geladen“ lösen, aber in Bezug auf die Berechtigungen können Sie aufgrund von Sicherheitsbeschränkungen nicht darauf zugreifen, wenn Sie eine Seite im Iframe laden, die von einer anderen Domäne stammt.

Das ist eine gute Idee, tatsächlich habe ich es versucht, genau wie Sie geantwortet haben. Es funktioniert jedoch nicht um die verweigerte Berechtigung (es behebt meine Wartezeit, bevor ich auf das Iframe-Zeug zugreifen kann).

– rz.

13. Dezember 2008 um 8:16 Uhr
Eigentlich … egal, es scheint, dass das Warten immer noch erforderlich ist, selbst wenn Sie dies tun.

– rz.

13. Dezember 2008 um 8:20 Uhr
Die Ready-Funktion funktioniert. Es scheint jedoch, dass es nicht darauf wartet, dass der Inhalt des Iframes vollständig geladen ist – nur für das übergeordnete Dokument, selbst wenn es für den Inhalt des Iframes selbst aufgerufen wird. Ich kann mir vorstellen, dass es auch an der gleichen Herkunftspolitik liegt.

– rz.

14. Dezember 2008 um 23:15 Uhr
Ein paar Anmerkungen zu diesem Code: Sie sollten iframe.contentDocument anstelle von .document verwenden, und Sie sollten .load() anstelle von .ready() verwenden, um das Warten zu vermeiden. (Nicht perfekt, aber besser)

– Rodrigo Queiro

27. Juli 2009 um 22:55 Uhr

10051300cookie-checkWie kann ich mit JavaScript/jQuery auf den Inhalt eines Iframes zugreifen?

#Abfrage #iframe #Javascript #Same-Origin-Policy