2010-05-31 6 views
9

J'ai un document avec un jeu de cadres imbriqué. J'ai besoin d'accéder à l'un des cadres imbriqués, nommé "sq_main", et d'accéder au contenu à l'intérieur de ce cadre. Voici ma structure:jQuery: Cadre d'accès dans un jeu de cadres imbriqué

<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> 

Malheureusement, je ne peux pas changer le code, c'est pourquoi je dois accéder avec jQuery. Je l'ai essayé d'écrire un sélecteur jQuery pour accéder au cadre « sq_main », mais pas de chance jusqu'à présent:

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

idées sur la façon de naviguer dans cette structure laide? :)

+0

Je ne peux pas trouver 'sq_main' dans votre exemple; est le code au-dessus du contenu de 'sq_main' ou l'exemple manque-t-il quelque chose? –

+0

Oui, c'est juste dans l'exemple, c'est la dernière image.

Répondre

9

Essayez de naviguer une étape à la fois. IIRC, le tableau frames ne fonctionne qu'avec iframes. Essayez le sélecteur frame[name = 'sq_main'] à la place.

Exemple par Ronny Sherer:

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

J'ai essayé: alert ($ ("frame [name = 'sq_main'] "). children ('# sq-search-wait-popup-détails'). text()); Mais cela ne semble pas fonctionner .. –

+0

Re 1, frameset devrait être utilisé à la place d'un élément de corps: http://www.w3schools.com/tags/tag_frameset.asp – starwed

+0

@starwed: Merci, j'ai corrigé ma réponse . –

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> 
Questions connexes