Как получить доступ к содержимому рамки (не iframe) из jQuery

У меня есть 2 кадра на одной странице (home.html)

<frameset rows="50%, 50%">
        <frame id="treeContent" src="treeContent.html" />
        <frame id="treeStatus"  src="treeStatus.html" />
</frameset>

а затем в одном кадре (treeStatus.html) у меня есть что-то вроде

<body style="margin: 0px">
<div id="statusText">Status bar for Tree</div>
</body>

Я хочу, чтобы в верхнем окне манипулировал div, расположенный в дочернем фрейме, через jquery (например, show and hide).

Я видел несколько questions как this, и они предлагают следующее

$(document).ready(function(){

            $('#treeStatus').contents().find("#statusText").hide();
     });

Я не знаю, работает ли это с iframe, но в моем случае, когда у меня есть простые фреймы, он не работает. Код помещается внутри home.html

Вот какой вывод из консоли firebug

>>> $('#treeStatus')
[frame#treeStatus]
>>> $('#treeStatus').contents()
[]
>>> $('#treeStatus').children()
[]

Итак, как мне получить доступ к элементам кадра из верхнего кадра? Я что-то пропустил?

Ответ

После объединения обоих ответов здесь правильный путь

$('#statusText',top.frames["treeStatus"].document).hide();

Для этого для работы фрейм должен иметь атрибут name отдельно от id, например:

<frameset rows="50%, 50%">
            <frame id="treeContent" src="treeContent.html" />
            <frame name="treeStatus" id="treeStatus"  src="treeStatus.html" />
    </frameset>

Ответы

Ответ 1

Вы можете захватить фрейм и div, которые вы хотите манипулировать и передавать в переменную.

var statusText = top.frames["treeStatus"].document.getElementById('statusText');

Затем вы можете делать все, что хотите, через jQuery.

$(statusText).whatever();

Хотя иногда вам не обойтись без использования фреймов, имейте в виду, что тег <frame> устарел в HTML5. Если вы планируете перейти к HTML5, вам придется использовать iFrames.

Ответ 2

Вам нужно указать ссылку на кадр, к которому вы хотите получить доступ:

$("some selector", top.frames["treeStatus"]))

Ответ 3

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

var statusText = 
top.document.getElementById("treeStatus").contentDocument.getElementById("statusText");

Затем, как сказал Чарльз, вы можете сделать все, что хотите, через jQuery:

$(statusText).whatever();

Ответ 4

https://jamesmccaffrey.wordpress.com/2009/07/30/cross-frame-access-with-jquery/

    $(document).ready(function(){
     $("#Button1").click(function(){
      $(parent.rightFrame.document).contents().find(‘#TextBox1’).val(‘Hello from left frame!’);
     });
    });

Но я использовал:

    $.post("content_right.php",{id:id},function(data)
     $(parent.frames["content_right"].document.body).html(data) ;
    });

Ответ 5

Для чистого jquery-решения (для которого не требуется top.frames и т.д.), похоже, работает следующее:

$('some selector for item from frame' ,$('frame selector')[0].contentDocument)

Это имеет то преимущество, что он работает для вложенных фреймов:

$('inner frame item selector', $('inner frame selector', $('outer frame selector')[0].contentDocument)[0].contentDocument)