Отладка 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 266
iframe google-chrome debugging

4 ответа:

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

Chrome v59 Chrome version 59

Chrome v33 Chrome version 33

Chrome v32 & lower Chrome pre-version 32

495

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

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

9

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

2

когда 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!"));
1