Чтение DOM-кода iframe

Question

Как и для Firebug Inspect У меня есть блок кода для чтения DOM и при наведении мыши выделите текущий элемент и щелкните по нему, чтобы распечатать местоположение DOM текущего элемента. См. Демонстрацию: http://jsfiddle.net/94EaH/4/

Я пытаюсь изменить код для работы с контентом в iframe. Я не хочу, чтобы он работал над текущей страницей и DOM iframe, потому что я знаю, что это не сработает. Я хочу изменить селектор, к которому привязан код, чтобы быть iframe. Iframe, конечно, встроен в страницу, но анализируется только DOM iframe.

Я могу манипулировать родителя через IFRAME, как это:

<iframe id="testFrame" src="blah.html" width="200px" height="200px"></iframe> 
<div id="testBox">text text text</div> 

$("#testFrame").contents().bind("click", function() { 
    $('#testBox').css('color', 'green'); 
}); 

Но если добавить еще одну строку, чтобы изменить содержимое DIV внутри IFrame .. ничего.

$("#testFrame").contents().bind("click", function() { 
    $('#testBox').css('color', 'green'); 
    $('#iframeDiv').css('color', 'red'); //this produces no result 
    console.log(event.target); // I get no information out of this also.. 
}); 

http://jsfiddle.net/94EaH/3/

Это трудно показать полную функциональность, так как blah.html (источник IFrame) не могут быть отображены на jsfiddle ..

Любые идеи о том, как я мог бы расширить эту функциональность DOM iframe вместо элемента #container текущей страницы, которую я использовал в примере?

• Файл IFrame находится на том же сервере, так что не выдает никакой безопасности

Answer 1

Если вы пытаетесь получить доступ к элементу в Iframe с JQuery из родительского окна, то у Вас есть проблема. Представьте, что у вас есть iframe. Внутри iframe есть div с id 'container'. Если вы сделаете это из родительского документа, $ ('# container'), вы обнаружите, что объект jQuery пуст.

jQuery привязан к окну и документирует объекты страницы, на которой он объявлен (загружен). Неважно, что вы создаете его из обработчика событий, связанного с iframe, функция $, которую вы используете, все еще принадлежит родительскому окну. Если загрузить JQuery в страницу Iframe, однако, вы можете получить ссылки на объекты, как это:

$('#testFrame')[0].contentWindow.$('#container'); 

Здесь первый «$», а второй «$» не обращаться к одному конструктору JQuery.

Edited Я забыл [0], чтобы получить доступ к первому IFRAME в объекте JQuery.

Надеюсь, это вам поможет.