Search code examples
javascriptpopupwindowwindow.opener

What's the proper way of using Javascript's window.opener?


I've created a popup window and in it I'd like to use a function I've created in the parent window. I've tried using window.opener.parentFunction() but to know avail. Has anyone else experienced this problem? Here's what my code looks like.

function parentFunction(){
alert('testing');
}


function print(){
var new_win = window.open('','name','height=400,width=500');
var output = "<html><head></head><body><table>\n";


for (i = 0; i < 10; i++) {
output += "<td onclick='window.opener.parentFunction()'>"+i+"</td>";
}

output += "</table></body></html>\n";
new_win.document.write(output);
}

*Got it working. Thanks guys.


Solution

  • There are a bunch of problems with your code. I've put together a working demo here.

    HTML

    <button id="clickMe">Click me</button>
    

    JavaScript

    window.onload = function() {
    
        function parentFunction() {
            alert('testing');
        }
    
        window.parentFunction = parentFunction;
    
        var years = [1, 2, 3, 4, 5, 6];
    
        function print() {
            var new_win = window.open('', 'name', 'height=400,width=500');
            //var cols = this.getCols();
            var cols = 2;
            var output = "<html><head></head><body><table>";
            var cell_count = 1;
            for (i = 0; i < years.length; i++) {
                if (cell_count === 1) {
                    output += "<tr>";
                }
                output += "<td onclick='window.opener.parentFunction();'>" + years[i] + "</td>";
                cell_count++;
                // end the row if we've generated the expected number of columns
                // or if we're at the end of the array
                if (cell_count > cols || i === years.length - 1) {
                    output += "</tr>\n";
                    cell_count = 1;
                }
            }
            output += "</table></body></html>";
            new_win.document.write(output);
        }
    
        document.getElementById('clickMe').onclick = print;
    };
    
    • years was not defined
    • this.getCols() was not defined
    • parentFunction was (probably) not visible at the window scope