Отладка фреймов с помощью инструментов разработчика Chrome - PullRequest
Новая
       23

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

283 голосов
/ 18 июля 2010

Я бы хотел использовать консоль разработчика 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 ]

526 голосов
/ 21 декабря 2011

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

Chrome v59 Chrome version 59

Chrome v33 Chrome version 33

Chrome v32 и ниже Chrome pre-version 32

9 голосов
/ 19 июля 2010

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

Обновление: Это больше не такСм. Ответ метаграфиста .

2 голосов
/ 05 августа 2016

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

1 голос
/ 20 сентября 2011

Когда 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!"));
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...