Отладка iframes с помощью инструментов разработчика Chrome

Я хотел бы использовать консоль разработчика Chrome для просмотра переменных и элементов DOM в моем приложении, но приложение существует внутри iframe (поскольку это приложение OpenSocial).

Итак, ситуация:

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

есть ли способ получить доступ к вещам, происходящим в этом iframe из консоли разработчика? Если я попытаюсь сделать document.getElementById("foo").something, он не работает, вероятно, потому что iframe находится в другом домене.

Я не могу открыть iframe содержимое в новой вкладке, потому что iframe необходимо также иметь возможность разговаривать с содержащим сайтом.

4 ответов


в инструментах разработчика в Chrome есть панель вверху, называемая Execution Context Selector (h / t Фелипе-Сабино), как раз под элементами, сетью, источниками... вкладки, которые меняются в зависимости от контекста текущей вкладки. Когда на вкладке консоль есть раскрывающийся список в этой панели, который позволяет выбрать контекст фрейма, в котором будет работать консоль. Выберите кадр в этом раскрывающемся списке, и вы окажетесь в соответствующем контексте фрейма. : D

Chrome v59 Chrome version 59

V33 не Хром Chrome version 33

хром файле v32 & более низкая Chrome pre-version 32


В настоящее время оценка в консоли выполняется в контексте основного фрейма на странице и придерживается той же политики кросс-происхождения, что и сам основной фрейм. Это означает, что вы не можете получить доступ к элементам в iframe, если основной рамы может. Однако вы все равно можете установить точки останова и отладить свой код с помощью панели скриптов.

обновление: это уже не правда. См.Metagrapher это.


в моем довольно сложном сценарии принятый ответ на то, как это сделать в Chrome, не работает для меня. Вместо этого вы можете попробовать отладчик Firefox (часть инструментов разработчика Firefox), который показывает все "источники", включая те, которые являются частью iFrame


когда iFrame указывает на ваш сайт следующим образом:

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

вы можете получить доступ к iframe DOM через такого рода вещи.

var iframeBody = $(window.my_frame.document.getElementsByTagName("body")[0]);
iframeBody.append($("<h1/>").html("Hello world!"));