Trying to call the child window function from parent window after window.open

Question

I am trying to invoke the below function to create a new window pop up. Whenver, I am invoking that it is crashing the parent window in chrome.

What I have observed: Till the openDoctorDetails function is executed, the child window is not loaded at all. Because of that doctorDetailsPage.populateDoctorDetails is never defined. Thence, it is going into an infinite loop.

var openDoctorDetails = function(physicianId) {
    var time1 = new Date();
    var doctorDetailsPage = window.open('PhysicianDetails.html', '_blank',
        'resizable=yes; width=1000; height=1500; top=50; left=50');
    var times = 0;
    while (!doctorDetailsPage.populateDoctorDetails) {
    setTimeout(function() {
        times++;
    }, 500);
    }
    doctorDetailsPage.populateDoctorDetails(physicianId);
    doctorDetailsPage.focus();
    console.log("Time taken for this openDoctorDetails:" + (new Date() - time1)
        + "  " + times);
};

Answer 1

Implement an onload event handler in the child window that calls a physicianDetailsWindowLoadedHandler method in the parent window. Don't use setTimeout. Just open the child window and let direct callbacks handle everything in an event-driven manner.

This way, the code will run in the child window after the child window is loaded, without having to create your own wait loop, and if the child window needs information from the parent window, it can access it by calling a method in the parent via the window.parent property.