Селекторы Firebug и JQuery в iFrame

Question

Я работаю над веб-приложением и использую плагин jQuery Colorbox, чтобы открыть окно, которое представляет форму для редактирования элементов родительского окна. Я использую Firebug для отладки Javascript и jQuery, и я заметил, что не могу выбрать элемент в моей HTML-форме Colorbox с помощью командной строки консоли jQuery. Например:

$ date = $ ("# date");

ничего не возвращает при запуске из командной строки консоли jQuery, хотя у меня есть элемент ввода с id = "date" и указатель Firebug "element inspect" может найти элемент в iFrame. Есть ли способ получить консоль Firebug для доступа к элементам в iFrame?

Спасибо за вашу помощь! Дуг

Answer 1

Вы ищете метод cd, описанный здесь: http://getfirebug.com/wiki/index.php/Command_Line_API

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

javascript:with(_FirebugCommandLine){cd($$(".canvas_iframe_util")[0].contentWindow)}

Обратите внимание, что with обычно плохая практика, но это буквально то, как Firebug выполняет то, что вы вводите в консоль, поэтому я подражал этому.

После выполнения этого все, что вы вводите в командную строку, выполняется в контексте iframe.

Answer 2

Вам необходимо передать документ iframe в качестве контекста для вашего селектора, потому что iframe имеет свое собственное отдельное дерево DOM:

$('#date', $('iframe').get(0).contentDocument);

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

---

Просто для уточнения, свойство .contentDocument работает в Chrome (и FF), но не в IE <8. Вы должны использовать <code>.document.