Debugowanie ramek iFrame za pomocą narzędzi programistycznych Chrome

Chciałbym użyć konsoli programisty Chrome, aby spojrzeć na zmienne i elementy DOM w mojej aplikacji, ale aplikacja istnieje wewnątrz iframe (ponieważ jest to aplikacja OpenSocial).

Więc sytuacja wygląda następująco: 

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

Czy jest jakiś sposób, aby uzyskać dostęp do rzeczy dziejących się w tym iframe z konsoli dewelopera? Jeśli próbuję zrobić document.getElementById("foo").something, to nie działa, prawdopodobnie dlatego, że iframe jest w innej domenie.

Nie mogę otworzyć zawartości iframe w nowej karcie, ponieważ iframe musi być w stanie rozmawiać do strony zawierającej również

Author: Bemmu, 2010-07-18
Source

4 answers

W narzędziach programistycznych w Chrome znajduje się pasek na górze, zwany Execution Context Selector (H/T felipe-sabino), tuż pod elementami, siecią, źródłami... karty, które zmieniają się w zależności od kontekstu bieżącej karty. Gdy na karcie konsola znajduje się rozwijane menu na tym pasku, które pozwala wybrać kontekst ramki, w którym konsola będzie działać. Wybierz ramkę z tej listy rozwijanej, a znajdziesz się w odpowiednim kontekście ramki. : D

Chrome v59 Chrome version 59

Chrome v33 Chrome version 33

Chrome v32 & lower Chrome pre-version 32

 495
Author: Metagrapher,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-29 17:39:57

Obecnie ewaluacja w konsoli jest wykonywana w kontekście głównej ramki na stronie i jest zgodna z tą samą zasadą cross-origin, co sama ramka główna. Oznacza to, że nie można uzyskać dostępu do elementów w ramce iframe, chyba że ramka główna może. Nadal możesz ustawić punkty przerwania w panelu skrypty i debugować kod.

Aktualizacja: to już nie jest prawda. Zobacz odpowiedź Metagraphera .

 9
Author: Yury Semikhatsky,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:18:01

W moim dość złożonym scenariuszu zaakceptowana odpowiedź jak to zrobić w Chrome nie działa dla mnie. Możesz zamiast tego wypróbować debugger Firefoksa (część narzędzi programistycznych Firefoksa), który pokazuje wszystkie "źródła", w tym te, które są częścią iFrame

 2
Author: Izzy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-08-05 01:13:08

Gdy ramka iFrame wskazuje na Twoją stronę w ten sposób: 

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

Możesz uzyskać dostęp do iFrame DOM poprzez tego typu rzeczy.

var iframeBody = $(window.my_frame.document.getElementsByTagName("body")[0]);
iframeBody.append($("<h1/>").html("Hello world!"));
 1
Author: Dave Aaron Smith,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-09-20 16:24:21