web-dev-qa-db-fra.com

JQuery et les cadres - $ (document) .ready ne fonctionne pas

J'ai une page, avec du code en js et jQuery et cela fonctionne très bien. Mais malheureusement, tout mon site est très très ancien et utilise des cadres. Ainsi, lorsque j'ai chargé ma page dans un cadre, $(document).ready() ne se déclenche pas.

Mon frameset ressemble à:

<frameset rows="79,*" frameBorder="1" frameSpacing="1" bordercolor="#5996BF" noresize> 
    <frame name="header" src="Operations.aspx?main='Info.aspx'" marginwidth="0" marginheight="0" scrolling="no" noresize frameborder="0">
    <frame name="main" src="Info.aspx" marginwidth="0" marginheight="0" scrolling="auto" noresize frameborder="0">      
</frameset>

Ma page est chargée dans le cadre main. Que devrais-je faire?

javascriptjqueryframes
15
matma

J'ai essayé la méthode mentionnée dans un autre commentaire:

$("#frameName").ready(function() {
    // Write you frame on load javascript code here
} );

et cela n'a pas fonctionné pour moi.

cela a:

$("#frameName").load( function() {
     //code goes here
} );

Même si l'événement ne se déclenche pas aussi rapidement, il attend que les images et les fichiers CSS aient également été chargés.

7
jenming

Si vous souhaitez déclencher l'événement onload pour vos cadres, procédez comme suit:

  1. Attribuez une id et name à chaque balise <frame>. Assurez-vous que la valeur des attributs id et name est la même.

  2. Utilisez le code suivant pour déclencher l'événement onload du cadre:

    $("frameName").ready(function() { 
  // Write your frame onload code here
}
2
Sachin Gaur

Je sais que c'est un vieux sujet. Mais pour aider certains d’entre vous qui accèdent à cette page, voici ma solution:

$($("#frameName")[0].contentWindow.document).ready(function() {
    // Write you frame onready code here
});
2
elfan

Je suppose que c'est un problème similaire que j'avais avec DOMContentLoaded dans une iframe.

J'ai écrit un article de blog à ce sujet .

2
zachleat

J'ai longtemps travaillé avec ce post ... voici ma solution.

test.html

<!DOCTYPE HTML>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>

    <script>        
      document.write('<frameset><frame name="frame_content" id="frame_content"></frame></frameset>');

      $('#frame_content').attr('src', 'test2.html');
      $('#frame_content').load(function()
      {
        if('${"#header"}' != '') {
          $("#header", frame_content.document).remove();
        }
      });
      if($('#frame_content').complete) $('#frame_content').trigger("load");
    </script>

</head>
</html>

test2.html

<!DOCTYPE HTML>
<html>

  <head>
  </head>

  <body>
    <div id="header">You will never see me, cause I have been removed!</div>
  </body>
</html>
1
Jochen

Avez-vous essayé de mettre le code jQuery dans la page Info.aspx?

1
Davide Gualano

Ce qui suit a également fonctionné pour moi:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script>
$(window.parent.frames[0].document).ready(function() {
    // Do stuff
});
</script>

Le [0] indique qu'il s'agit de la première image du document, [1] serait la deuxième et ainsi de suite. C’est particulièrement agréable si vous n’avez pas le contrôle de la majoration et que le document est toujours prêt.

1
brobert7

Je ne sais pas si c'est la meilleure solution, mais lorsque je supprime $(document).ready() et que je conserve son corps, tout fonctionne parfaitement.

0
matma

Vous ne savez pas trop ce que vous essayez de faire, mais j'ai une application ASP encore plus ancienne qui fonctionne avec des cadres, et j'ai récemment ajouté la fonctionnalité jQuery, qui fonctionne très bien. Le $ (document) .ready () fonctionne bien dans un cadre, mais si vous souhaitez référencer le DOM dans un autre cadre, vous devrez utiliser l'événement onload du Cadre pour vous permettre de savoir quand le DOM du cadre est chargé. Certes, j'ai utilisé iFrames, mais le concept devrait être le même.

0
Richard B

Cette réponse peut être en retard, mais cette réponse peut aider quelqu'un comme moi ...

Cela peut être fait via un code Javascript natif -

ifrm2 = var ifrm2 = document.getElementById('frm2');
if (ifrm2.contentDocument.readyState == 'complete') {
  //here goes the code after frame fully loaded
}

 //id = frm2 is the id of iframe in my page
0
newstockie

Pas besoin de modifier le balisage. Il suffit de réparer le sélecteur. CA devrait etre:

$("frame[name='main']").ready(function(){..});

ne pas

$("#frameName").ready(function(){..});

Remarque: il semble que l'événement jQuery ready se déclenche plusieurs fois. Assurez-vous que cela va bien avec votre logique.

0
Edward Olamisan