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

Question

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

Gefragt el 13 de Dezember, 2008: Wann wurde die Frage gestellt
718396 Ansichten: Anzahl der Besuche der Frage
5 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

Ich möchte den HTML-Code innerhalb eines iframe mit jQuery manipulieren.

Ich dachte, ich wäre in der Lage, dies zu tun, indem Sie den Kontext der jQuery-Funktion, das Dokument des iframe, etwas wie sein:

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

Dies scheint jedoch nicht zu funktionieren. Ein wenig 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 erhalte permission denied -Typ-Fehler).

Kennt jemand eine Lösung für dieses Problem?

Gefragt el 13 de Dezember, 2008 von rz.

3 Stimmen

Was enthält der iFrame - ist sein src auf einen anderen Bereich festgelegt?

Kommentiert el 14 de Dezember, 2008 von James

0 Stimmen

Wenn es sich um einen anderen Bereich handelt, gibt es dann noch eine Möglichkeit, auf dessen Inhalt zuzugreifen oder ein Ereignis zu registrieren?

Kommentiert el 1 de Oktober, 2009 von adardesign

38 Stimmen

Nein, denn das wäre ein Cross-Site-Scripting, das aus Sicherheitsgründen verboten ist. Meine Lösung war die Verwendung eines Proxys: Ich habe den HTML-Code im IFRAME wortwörtlich über meine eigene Website eingespeist, so dass er aus Sicht des Browsers nicht mehr seitenübergreifend ist.

Kommentiert el 6 de April, 2010 von reinierpost

Anzeigen 2 weitere Kommentare

Answer 1

5 Antworten

Answer 2

32voto

zupa Punkte 11846

Ich finde diesen Weg sauberer:

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

Beantwortet el 3 de August, 2012 von zupa (11846 Punkte )

Answer 3

27voto

Andreas Grech Punkte 102197

Sie müssen ein Ereignis an den onload-Handler eines iframe anhängen und die Js darin ausführen, damit Sie sicherstellen, dass der iframe fertig geladen ist, bevor Sie auf ihn zugreifen.

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

Damit ist das Problem des "Noch-nicht-Ladens" gelöst, aber wenn Sie eine Seite in den Iframe laden, die von einer anderen Domäne stammt, können Sie aufgrund von Sicherheitsbeschränkungen nicht auf sie zugreifen.

Beantwortet el 13 de Dezember, 2008 von Andreas Grech (102197 Punkte )

Answer 4

22voto

B.Asselin Punkte 958

Sie können window.postMessage verwenden, um eine Funktion zwischen der Seite und dem Iframe aufzurufen (domänenübergreifend oder nicht).

Dokumentation

Seite.html

<!DOCTYPE html>
<html>
<head>
    <title>Page with an iframe</title>
    <meta charset="UTF-8" />
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>
    var Page = {
        id:'page',
        variable:'This is the page.'
    };

    $(window).on('message', function(e) {
        var event = e.originalEvent;
        if(window.console) {
            console.log(event);
        }
        alert(event.origin + '\n' + event.data);
    });
    function iframeReady(iframe) {
        if(iframe.contentWindow.postMessage) {
            iframe.contentWindow.postMessage('Hello ' + Page.id, '*');
        }
    }
    </script>
</head>
<body>
    <h1>Page with an iframe</h1>
    <iframe src="iframe.html" onload="iframeReady(this);"></iframe>
</body>
</html>

iframe.html

<!DOCTYPE html>
<html>
<head>
    <title>iframe</title>
    <meta charset="UTF-8" />
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>
    var Page = {
        id:'iframe',
        variable:'The iframe.'
    };

    $(window).on('message', function(e) {
        var event = e.originalEvent;
        if(window.console) {
            console.log(event);
        }
        alert(event.origin + '\n' + event.data);
    });
    $(window).on('load', function() {
        if(window.parent.postMessage) {
            window.parent.postMessage('Hello ' + Page.id, '*');
        }
    });
    </script>
</head>
<body>
    <h1>iframe</h1>
    <p>It's the iframe.</p>
</body>
</html>

Beantwortet el 2 de Februar, 2014 von B.Asselin (958 Punkte )

Answer 5

4voto

Evgeny Karpov Punkte 2250

Ich ziehe es vor, eine andere Variante für den Zugang zu verwenden. Von der übergeordneten können Sie einen Zugriff auf Variable in Kind iframe haben. $ ist ebenfalls eine Variable, auf die Sie zugreifen können, indem Sie window.iframe_id.$

Zum Beispiel, window.view.$('div').hide() - alle Divs im iframe mit der id 'view' ausblenden

Aber es funktioniert nicht in FF. Für eine bessere Kompatibilität sollten Sie verwenden

$('#iframe_id')[0].contentWindow.$

Beantwortet el 2 de September, 2012 von Evgeny Karpov (2250 Punkte )

Answer 6

2voto

Khb Punkte 1393

Haben Sie versucht, die klassische, warten, bis das Laden mit jQuery's builtin bereit Funktion abgeschlossen?

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

K

Beantwortet el 13 de Dezember, 2008 von Khb (1393 Punkte )

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

Antworten

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

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

Antworten

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: