375 Stimmen

Bemmu avatar

Debuggen von iframes mit den Chrome-Entwicklerwerkzeugen

Gefragt el 18 de Juli, 2010
Wann wurde die Frage gestellt
163343 Ansichten
Anzahl der Besuche der Frage
4 Antworten
Anzahl der Fragenantworten
Gelöst
Aktueller Status der Frage

Ich möchte die Chrome-Entwicklerkonsole verwenden, um Variablen und DOM-Elemente in meiner Anwendung zu betrachten, aber die Anwendung existiert innerhalb einer iframe (da es eine OpenSocial-Anwendung ist).

Die Situation ist also so:

<containing site>
 <iframe id='foo' src='different domain'>
  ... my app ...
 </iframe>
</containing site>

Gibt es eine Möglichkeit, auf Dinge zuzugreifen, die in diesem iframe von der Entwicklerkonsole aus? Wenn ich versuche zu tun document.getElementById("foo").something funktioniert es nicht, wahrscheinlich weil die iframe in einem anderen Bereich liegt.

Ich kann die Datei nicht öffnen. iframe Inhalt in einer neuen Registerkarte, da die iframe muss auch mit der enthaltenen Website kommunizieren können.

Gefragt el 18 de Juli, 2010 von Bemmu

Antworten

Zu viele Anzeigen?

665voto

Metagrapher avatar
Metagrapher Punkte 8162

In den Entwicklertools von Chrome gibt es eine Leiste am oberen Rand, die Execution Context Selector (h/t felipe-sabino ), direkt unter den Registerkarten Elemente, Netzwerk, Quellen..., die sich je nach Kontext der aktuellen Registerkarte ändert. Wenn Sie sich auf der Registerkarte Konsole befinden, gibt es in dieser Leiste ein Dropdown-Menü, mit dem Sie den Rahmenkontext auswählen können, in dem die Konsole arbeiten soll. Wählen Sie in diesem Dropdown-Menü Ihren Frame aus und Sie befinden sich im entsprechenden Frame-Kontext :D

Chrom v59 Chrome version 59

Chrom v33 Chrome version 33

Chrome v32 & niedriger Chrome pre-version 32

Beantwortet el 20 de Dezember, 2011 von Metagrapher (8162 Punkte )

10voto

Yury Semikhatsky avatar
Yury Semikhatsky Punkte 107

Derzeit wird die Auswertung in der Konsole im Kontext des Hauptframes auf der Seite durchgeführt und unterliegt denselben herkunftsübergreifenden Richtlinien wie der Hauptframe selbst. Das bedeutet, dass Sie nur dann auf Elemente im iframe zugreifen können, wenn der Hauptrahmen dies auch kann. Sie können jedoch weiterhin Haltepunkte setzen und Ihren Code mithilfe des Skriptfensters debuggen.

Aktualisierung: Dies ist nicht mehr der Fall. Siehe Antwort des Metagrafikers .

Beantwortet el 19 de Juli, 2010 von Yury Semikhatsky (107 Punkte )

2voto

Dave Aaron Smith avatar
Dave Aaron Smith Punkte 4447

Wenn der iFrame auf Ihre Website verweist, wie hier:

<html>
  <head>
    <script type="text/javascript" src="/jquery.js"></script>
  </head>
  <body>
    <iframe id="my_frame" src="/wherev"></iframe>
  </body>
</html>

Sie können auf diese Weise auf das iFrame DOM zugreifen.

var iframeBody = $(window.my_frame.document.getElementsByTagName("body")[0]);
iframeBody.append($("<h1/>").html("Hello world!"));
Beantwortet el 20 de September, 2011 von Dave Aaron Smith (4447 Punkte )

2voto

Izzy avatar
Izzy Punkte 193

In meinem ziemlich komplexen Szenario funktioniert die akzeptierte Antwort, wie dies in Chrome zu tun ist, für mich nicht. Vielleicht möchten Sie stattdessen den Firefox-Debugger ausprobieren (Teil der Firefox-Entwicklertools), der alle "Quellen" anzeigt, einschließlich derer, die Teil eines iFrames sind

Beantwortet el 5 de August, 2016 von Izzy (193 Punkte )

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

Yandex
X