2010-05-27 15 views
26

tengo 2 marcos en una página como esta (home.html)Cómo acceder bastidor (no iframe) contenidos de jQuery

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

y luego en un cuadro (treeStatus.html) I tener algo como

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

que quiero de la ventana superior para manipular el div se encuentra en el marco secundario a través de jQuery (por ejemplo, mostrar y ocultar).

he visto severalquestionslikethis y sugieren la siguiente

$(document).ready(function(){ 

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

No sé si esto funciona con iframes, pero en mi caso en el que tengo fotogramas simples no parece funcionar. El código se coloca en el interior home.html

Aquí es un poco de salida de la consola de Firebug

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

Entonces, ¿cómo puedo acceder a los elementos del marco del marco superior? ¿Me estoy perdiendo de algo?

respuesta

Después de combinar ambas respuestas aquí, la forma correcta es

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

Para que esto funcione el marco debe tener el nombre atribuyen además de la identificación, así:

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

Sólo una nota : ¿por qué usar frames cuando podría usar 'position: fixed' para agregar una barra de estado (o log sugerido por el tamaño) siempre en la parte inferior de la ventana gráfica ... ¿es compatible con un navegador antiguo? – alex

+0

@alex esto es solo un ejemplo mínimo que creé para stackoverflow. La aplicación real es completamente diferente. Es más complicado que simples barras de estado. Los marcos son un requisito (¡No preguntes!). – kazanaki

+0

Bien, sin preocupaciones. Solo pensé que agregaría eso (algunas personas no saben acerca de 'position: fixed'). – alex

Respuesta

11

Podrías agarrar el Marco y div que deseas manipular y pasarlo a una variable.

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

Luego puede hacer lo que quiera a través de jQuery.

$(statusText).whatever(); 

Aunque a veces simplemente no puede conseguir alrededor de tener que utilizar marcos, tenga en cuenta que la etiqueta <frame> es obsoleto en HTML5. Si alguna vez planea pasar a HTML5, tendrá que usar iFrames.

+0

No es exactamente lo que quería porque creo que el objetivo de jQuery es evitar getElementById. Sin embargo, tu respuesta me ayudó a hacer lo que quiero, así que lo acepto. – kazanaki

+0

great post man, trabajado como un encanto –

5

Necesita proporcionar una referencia al marco que usted para acceder:

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

Intenté esto y no funciona solo. Después de ver la respuesta del portátil, lo hice funcionar con $ ("algún selector", top.frames ["treeStatus"]. Documento)) y también agregando "treeStatus" como nombre aparte de id – kazanaki

4

Tengo marcos anidados.En mi caso, para que funcione i utilizado comando:

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

Entonces, como Charles ya ha respondido, se puede hacer cualquier cosa que desee a través de jQuery:

$(statusText).whatever(); 
+0

contentDocument es lo que estaba buscando! Yo también he anidado marcos, ¡gracias por esta publicación! – NetWave

2

Para una solución pura de jQuery (que no requiere top.frames etc), la siguiente parece funcionar:

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

Esto tiene la ventaja de que funcione para marcos anidados:

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