jQuery: receive document ready() on child window

Question

I'm trying to get notified when the child window I'm opening has its document loaded and ready. This doesn't seem to work:

win = window.open(href, 'test', 'width=300, height=400');
win.focus();
$(win.document).ready(function() {
           // Ok, the function will reach here but if I try to manipulate the
           // DOM it doesn't work unless I use breakpoints
           $(this).contents().find("...").doStuff(); // nothing happens
    });

What do I have to do?

thanks McLovin! this helped me solve a similar problem – DevDave Jan 29 '13 at 12:53 — DevDave, Jan 29 '13 at 12:53

score 10 · Accepted Answer · edited May 23 '17 at 11:53

10

Have you tried this? —

$(win.document).ready(function() {
    $(win.document).contents().find("...").doStuff();
});

This question discusses something very similar. Duplicate?

edited May 23 '17 at 11:53

Community

1
1

answered Jan 30 '11 at 11:29

polarblau

17,649
7
63
84

4

Yes I've tried that as well. If my conslusion from my tests is correct, the problem is that the ready() function is triggered while the DOM tree is not really ready yet.. – mrmclovin Jan 30 '11 at 11:42
1

Have you tried the plain JS as well, that's mentioned in the answer to the other question? – polarblau Jan 30 '11 at 11:48
5

Yes it works with manual javascript, thank you! Had to do this: win.onload = function() { form = $(this.document.getElementById(form_id)); form.submit(function(evt){ – mrmclovin Jan 30 '11 at 15:31
2

this doesnt work, win.onload = function() {} is required – iamkrillin Feb 17 '15 at 22:21

Gunni · Answer 2 · 2015-06-24T07:18:40.490

6

I had a similar problem and for me the .load event on the window did work, the .ready did not. So you may try:

win = window.open(href, 'test', 'width=300, height=400');
$(win).load(function() {
    $(this).contents().find("...").doStuff(); 
});

edited Jun 24 '15 at 07:18

answered Feb 19 '13 at 16:03

Gunni

519
5
14

This worked for me in Chrome and FF, but IE didn't run the load callback. I ended up adding a self-canceling `setInterval` to check if the child window was ready and run the code. – Andrew Nov 18 '16 at 22:31
1

I investigated why `ready` doesn't work, so I'll share it. `$(win.document).ready` is completely equivalent to `$(window).ready`. See [the source](https://github.com/jquery/jquery/blob/3.3.1/src/core/ready.js#L13-L26). (Note: even at the posting time of this question, that is 2011, `ready` works similarly to v3.3.1) We should use `load` instead of `ready` for the purpose, as Gunni suggested. – anqooqie Feb 08 '18 at 01:41

score 1 · Answer 3 · edited Jun 16 '16 at 15:14

Use window.opener in script on site, which you are loading and execute function defined in global (!) at first page.

Main page:

<html>
<head>
<script type="text/javascript">
    window.notify = function () {
        alert('runned from opened window');
    };
    window.onload = function() {
        document.getElementById('button').addEventListener('click', function() {
            window.open('test.html');
        }, false);
    };
</script>
</head>
<body>
<button id="button">Open window</button>
</body>

Opened page:

<html>
<head>
<script type="text/javascript">
    window.onload = function() {
        window.opener.notify()
    };
</script>
</head>
<body>
    Popup site
</body>
</html>

Thank you for the suggestion. However, I can't (don't want to) edit the target site which I'm opening! — mrmclovin, Jan 30 '11 at 15:30

vkGunasekaran · Answer 4 · 2016-12-14T13:33:23.880

0

Simply add this code in iframe,

$(document,parent.document).ready(function(){
alert('Done');
});

edited Dec 14 '16 at 13:33

answered Dec 14 '16 at 13:23

vkGunasekaran

6,668
7
50
59

jQuery: receive document ready() on child window

4 Answers4

Linked