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

Question

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?

Where is your JavaScript? In the "main" frame or in the frameset? — Tomalak, Oct 21 '08 at 08:54

score 8 · Answer 1 · edited Aug 02 '12 at 10:36

8

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.

edited Aug 02 '12 at 10:36

Neo

2,305
4
36
70

answered Jun 17 '10 at 18:11

jenming

809
7
8

1

For clarity, that should be $("#frameName"). – HertzaHaeon Jun 22 '11 at 20:34
The selector should be: $("frame[name='main']") not $("#frameName"). – Edward Olamisan Nov 26 '14 at 02:55

score 3 · Answer 2 · answered Jul 04 '12 at 05:36

3

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
});

answered Jul 04 '12 at 05:36

elfan

31
1

score 2 · Answer 3 · edited Nov 01 '11 at 18:30

2

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

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

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

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

edited Nov 01 '11 at 18:30

Jason Plank

2,336
5
31
40

answered Nov 27 '08 at 07:39

score 2 · Answer 4 · answered Jan 28 '09 at 19:13

2

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

I wrote a blog post about it.

answered Jan 28 '09 at 19:13

zachleat

3,318
1
23
20

score 2 · Answer 5 · answered Jan 31 '12 at 15:23

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.

score 1 · Answer 6 · edited Jun 08 '12 at 11:39

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>

score 1 · Answer 7 · answered Oct 21 '08 at 10:30

1

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

answered Oct 21 '08 at 10:30

Davide Gualano

12,813
9
44
65

@BrianG frame src is `Operations.aspx?main='Info.aspx` – Gogol Mar 08 '17 at 08:25

score 1 · Answer 8 · answered Oct 22 '08 at 02:57

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.

score 0 · Answer 9 · edited Nov 01 '11 at 18:31

0

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

edited Nov 01 '11 at 18:31

Jason Plank

2,336
5
31
40

answered Oct 21 '08 at 10:50

matma

1,104
1
10
17

score 0 · Answer 10 · answered Nov 26 '14 at 03:21

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.

score 0 · Answer 11 · edited Feb 28 '16 at 10:27

0

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

edited Feb 28 '16 at 10:27

WitVault

23,445
19
103
133

answered Feb 28 '16 at 09:40

newstockie

114
1
4

score -2 · Answer 12 · edited Nov 01 '11 at 18:32

-2

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

edited Nov 01 '11 at 18:32

Jason Plank

2,336
5
31
40

answered Oct 21 '08 at 09:03

Aleris

7,981
3
36
42

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

12 Answers12

Linked