How to call a javascript function in an opened child window

Question

I have a parent html file and want the user to click something which should then open a new window (or tab) containing the (dynamically generated) contents of a div in the parent (which is hidden in the parent).

From my reading here and elsewhere something like this should work:

parent.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Parent</title>
        <script src="/js/jquery-1.11.0.min.js"></script>
    </head>
    <body>
        <div id="from">
            html from parent
        </div>

        <div id="launcher">
            launch child
        </div>

        <script type="text/javascript">
            $("#launcher").click(function() {
                var child = window.open('child.html', '_blank', '', false);
                if (child) {
                    var html = $("#from").html();
                    //window.setTimeout(child.addHTML(html), 5000);
                    child.addHTML(html);
                }
                else {
                    alert('Please allow popups for this site');
                }
            });
        </script>
    </body>
</html>

child.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Child</title>
        <script src="/js/jquery-1.11.0.min.js"></script>
    </head>
    <body>
        <div id="to"></div>

        <script type="text/javascript">
            function addHTML(html) {
                $('#to').html(html);
            }
        </script>
    </body>
</html>

However, regardless of using the commented-out setTimeout (incase the child hadn't loaded yet before calling the child's function), I get this error (in Safari, similar in Chrome) immediately:

'undefined' in not a function (evaluating 'child.addHTML(html)')

What am I doing wrong? Is there a better way to achieve my goals?

Not that it's the problem, but calling setTimeout() that way won't do any good. You're asking for the result of child.addHTML() to be called in 5 seconds; child.addHTML() will be called immediately to get the result. — Paul Roub
– Paul Roub, Commented Aug 26, 2014 at 13:15

Tobías · Accepted Answer · 2014-08-26 14:12:04Z

1

The first parameter of window.setTimeout should be the function to execute.

Try this:

        if (child) {
            var html = $("#from").html();
            window.setTimeout(function(){child.addHTML(html);}, 5000);
        }

I built a small example:: http://jsfiddle.net/rt19hv7v/

answered Aug 26, 2014 at 14:12

Tobías

6,3174 gold badges41 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sbs Over a year ago

That works... now is there a way to do this without guessing what timeout to use and either waiting too long, or not long enough?

Tobías Over a year ago

Yes, you can use child.addEventListener('eventname', function(){...}, true); I've updated the jsfiddle: jsfiddle.net/rt19hv7v/1

micha · Accepted Answer · 2014-08-26 15:22:53Z

1

if the goal is only to add the content and not to call a function u can do it this way

if (child) {
    child.addEventListener('load', function () {
        var html = $("#from").html();
        $('#to',child.document).html(html)
    });
}else {
    alert('Please allow popups for this site');
}

answered Aug 26, 2014 at 15:22

micha

1,23810 silver badges7 bronze badges

Collectives™ on Stack Overflow

How to call a javascript function in an opened child window

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related