2010-05-31 12 views
9

Tengo un documento que tiene un conjunto de marcos anidados. Necesito acceder a uno de los marcos anidados, llamado "sq_main", y acceder al contenido dentro de este marco. Aquí está mi estructura:jQuery: marco de acceso en conjunto de marcos anidados

<html> 
<head> 
<title>Title</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
</head> 
<frameset rows="28,*" frameborder="0" border="0"> 
    <frame src="/_admin/?SQ_BACKEND_PAGE=header" name="sq_header" scrolling="no" marginwidth="0" marginheight="0"> 
    <frameset cols="380,10,*" frameborder="0" border="0" id ="main_frameset"> 
    <frame src="/_admin/?SQ_BACKEND_PAGE=sidenav" name="sq_sidenav" scrolling="no" marginwidth="0" marginheight="0"> 
    <frame src="/_admin/?SQ_BACKEND_PAGE=resizer" name="sq_resizer" scrolling="no" marginwidth="0" marginheight="0"> 
    <frame src="/_admin?SQ_BACKEND_PAGE=main&assetid=43&sq_from_frontend=1" name="sq_main" marginwidth="0" marginheight="0" scrolling="yes"> 
    </frameset> 
</frameset> 
<noframes></noframes> 
</html> 

Lamentablemente, no puedo cambiar el código, es por eso que necesito para acceder a ella con jQuery. He tratado de escribir un selector de jQuery para acceder al cuadro "sq_main", pero sin suerte hasta ahora:

$('body', parent.frames[0].sq_main).prepend('<h1>TEST!!!!</h1>'); 

ideas sobre cómo profundizar en esta estructura feo? :)

+0

no puedo encontrar 'sq_main' en su ejemplo; ¿El código está por encima del contenido de 'sq_main' o el ejemplo falta algo? –

+0

Sí, está bien en el ejemplo, es el último cuadro. –

Respuesta

9

Intenta navegar un paso a la vez. IIRC, la matriz frames solo funciona con iframes. Pruebe el selector frame[name = 'sq_main'] en su lugar.

Ejemplo por Ronny Sherer:

var frameDocument = $('frame[name="mainFrame"]', top.document)[0].contentDocument; 
$(frameDocument).find('body').prepend('<h1>TEST!!!!</h1>'); 
+0

Intenté: alert ($ ("frame [name = 'sq_main'] "). children ('# sq-search-wait-popup-details'). text()); Pero eso no parece funcionar ... –

+0

Re 1, se debe usar un conjunto de marcos en lugar de un elemento del cuerpo: http://www.w3schools.com/tags/tag_frameset.asp – starwed

+0

@starwed: Gracias, he corregido mi respuesta . –

4
var sql_mainJQ = $("frame[name='sql_main']", top.document); 

//$('body', sql_mainJQ.contents()).prepend("TEST!!!!"); // :(Bad 

var frameContent = sql_mainJQ[0].contentDocument; 
if ($.browser.msie) { 
    frameContent = mainFrameJQ[0].contentWindow.document; 
} else { 
    frameContent = mainFrameJQ[0].contentDocument; 
} 
$('body', sql_mainJQ.contents()).prepend("TEST!!!!"); // :> Maybe OK! 
0
<html> 
<head> 
    <title>frames.html</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
</head> 
<frameset rows="100,*" frameborder="1" border="2"> 
       <frame src="helloworld.html" name="sq_header" id="sq_header" scrolling="yes" marginwidth="0" marginheight="0"> 
        <frameset cols="380,300,*" frameborder="1" border="2" id ="main_frameset"> 
        <frame src="helloworld.html" name="sq_sidenav" id="sq_sidenav" scrolling="yes" marginwidth="0" marginheight="0"> 
        <frame src="anotherpage.html" name="sq_resizer" id="sq_resizer" scrolling="yes" marginwidth="0" marginheight="0"> 
        <frame src="helloworld.html" name="sq_main" id="sq_main" marginwidth="0" marginheight="0" scrolling="yes"> 
        </frameset> 
        </frameset> 
<noframes> 
</noframes> 
</html> 
<html> 
<head> 
    <title>anotherpage.html</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 

    <script type="text/javascript" src="http://www.google.com/jsapi"></script> 

    <script type="text/javascript"> 
        //http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/ 
        // You may specify partial version numbers, such as "1" or "1.3", 
        // with the same result. Doing so will automatically load the 
        // latest version matching that partial revision pattern 
        // (e.g. 1.3 would load 1.3.2 today and 1 would load 1.7.2). 
        google.load("jquery", "1.6.2"); 

        google.setOnLoadCallback(function() { 
        // Place init code here instead of $(document).ready() 
        }); 
    </script> 

    <script language="Javascript"> 
       var d = new Date(); 
       var n = d.getTime(); 

       $(document).ready(function(){ 
        $('#title').html($("title").html()); 
/* 
this is to work in safari 
see "Updated answer provided below....looks like a setTimeout maybe needed as the  frames aren't loaded when the initial startup script runs. – David Hoerster Aug 21 '10 at 16:38 
url: http://stackoverflow.com/questions/3534082/jquery-access-table-inside-a-frame 
*/ 
setTimeout(writemsg, 2000); 
function writemsg() { 
        $('#helloworld',top.frames["sq_main"].document).html("Write from "+ $("title").html()+" in sq_main at "+ n); 
} 
        }); 

    </script> 

</head> 
<body> 
    <div id="title"> 
    </div> 
    </p> 
    <div id="helloworld"> 
     Hello World JQuery!</div> 
</body> 
</html> 
<html> 
<head> 
    <title>helloworld.html</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 

    <script type="text/javascript" src="http://www.google.com/jsapi"></script> 

    <script type="text/javascript"> 
        //http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/ 
        // You may specify partial version numbers, such as "1" or "1.3", 
        // with the same result. Doing so will automatically load the 
        // latest version matching that partial revision pattern 
        // (e.g. 1.3 would load 1.3.2 today and 1 would load 1.7.2). 
        google.load("jquery", "1.6.2"); 

        google.setOnLoadCallback(function() { 
        // Place init code here instead of $(document).ready() 
        }); 
    </script> 

    <script language="Javascript"> 
       $(document).ready(function(){ 
        $('#title').html($("title").html()); 
        }); 

    </script> 

</head> 
<body> 
    <div id="title"> 
    </div> 
    </p> 
    <div id="helloworld"> 
     Hello World JQuery!</div> 
</body> 
</html> 
Cuestiones relacionadas