Как получить доступ к содержимому фрейма (не iframe) из jQuery - PullRequest
Новая
       15

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

26 голосов
/ 27 мая 2010

У меня есть 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 (например, показать и скрыть).

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

$(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 помимо идентификатора, например: 

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

Ответы [ 5 ]

12 голосов
/ 27 мая 2010

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

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

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

$(statusText).whatever();

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

5 голосов
/ 25 февраля 2013

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

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

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

$(statusText).whatever();
5 голосов
/ 27 мая 2010

Вам необходимо предоставить ссылку на фрейм, к которому вы обращаетесь: 

$("some selector", top.frames["treeStatus"]))
2 голосов
/ 05 января 2016

Для чистого решения 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)
2 голосов
/ 16 ноября 2015

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) ;
    });
...