CODEWITHSUNDEEP
javascriptjqueryframes
matma
matma

Reputation: 1094

JQuery and frames - $(document).ready doesn't work

I have a page, with some code in js and jQuery and it works very well. But unfortunately, all my site is very very old, and uses frames. So when I loaded my page inside a frame, $(document).ready() doesn't fire up.

My frameset looks like:

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

My page is loaded into the main frame. What should I do?

Upvotes: 16

Views: 59178

Answers (12)

newstockie
newstockie

Reputation: 124

This answer may be late, but this reply may help someone like me...

This can be done via native Javascript code - 

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

Upvotes: 0

Edward Olamisan
Edward Olamisan

Reputation: 891

No need to modify the markup. Just fix the selector. It should be: 

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

not 

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

Note: it seems the jQuery ready event fires multiple times. Make sure that is OK with your logic.

Upvotes: 0

jenming
jenming

Reputation: 809

I have tried the method mentioned in another comment:

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

and it did not work for me.

this did:

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

Even though the event does not fire as quickly - it waits until images and css have loaded also.

Upvotes: 8

elfan
elfan

Reputation: 31

I know this is an old topic. But to help some of you who reach this page, here is my solution:

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

Upvotes: 3

Jochen
Jochen

Reputation: 11

I have worked a long time with this post... here is my 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>

Upvotes: 1

brobert7
brobert7

Reputation: 49

The following also worked for me:

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

The [0] indicates that it is the first frame in the document, [1] would be the second frame, and so on. This is particularly nice if you do not have control over the mark-up, and it is still utilizing document ready.

Upvotes: 2

Aleris
Aleris

Reputation: 8059

There is no reason for $(document).ready() not to be called. Be sure your page contains an include to jquery.js. Try to do a simple test with an empty HTML page and just an alert to see if there is another problem.

If you are trying to use this inside the HTML page that contains the frame's definition, keep in mind that there is no document there, you will have to use the

Upvotes: -2

matma
matma

Reputation: 1094

I don't know if it is the best solution, but when I remove $(document).ready() and keep its body, everything works perfectly.

Upvotes: 0

Sachin Gaur
Sachin Gaur

Reputation:

If you want to fire the onload event for your frames, then follow these steps:

  1. Assign an id and name to each <frame> tag. Make sure both id and name attributes value is same.

  2. Use the following code to fire the onload event of the frame:

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

Upvotes: 2

zachleat
zachleat

Reputation: 3337

I assume this is a similar problem I was having with DOMContentLoaded in an iframe.

I wrote a blog post about it.

Upvotes: 2

Richard B
Richard B

Reputation: 1183

Not sure what you're trying to do, but I have an even older classic asp app that operates out of frames, and I just recently added jQuery functionality and it is working great. The $(document).ready() works fine within a frame, but if you wish to reference the DOM in another frame, you'll have to use the Frame's onload event to let you know when the frame's DOM is loaded. Admittedly, I used iFrames, but the concept should be the same.

Upvotes: 1

Davide Gualano
Davide Gualano

Reputation: 13003

Have you tried to put the jQuery code inside the Info.aspx page?

Upvotes: 1

Related Questions