jQuery: receive document ready() on child window

Asked 30/1, 2011 at 10:41 Answered 14/12, 2016 at 13:23

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?

Conduit answered 30/1, 2011 at 10:41 Comment(1)

thanks McLovin! this helped me solve a similar problem – Stroller 29/1, 2013 at 12:53

Have you tried this? —

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

This question discusses something very similar. Duplicate?

Dorman answered 30/1, 2011 at 11:29 Comment(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.. – Conduit 30/1, 2011 at 11:42

Have you tried the plain JS as well, that's mentioned in the answer to the other question? – Dorman 30/1, 2011 at 11:48

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){ – Conduit 30/1, 2011 at 15:31

this doesnt work, win.onload = function() {} is required – Edmonton 17/2, 2015 at 22:21

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

Vellum answered 19/2, 2013 at 16:3 Comment(2)

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. – Epidote 18/11, 2016 at 22:31

I investigated why ready doesn't work, so I'll share it. $(win.document).ready is completely equivalent to $(window).ready. See the source. (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. – Niddering 8/2, 2018 at 1:41

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>

Headreach answered 30/1, 2011 at 11:53 Comment(1)

Thank you for the suggestion. However, I can't (don't want to) edit the target site which I'm opening! – Conduit 30/1, 2011 at 15:30

Simply add this code in iframe,

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

Culpa answered 14/12, 2016 at 13:23 Comment(0)

Recommended topics

Hot tags