Question

I have two windows, one for input and one for display. I want the display window to dynamically update according to the input. I found an example online that is close to what I am doing here where I add items (in the example’s case rows). But I need them to update on the other page instead of on the input page. Hopefully that made sense.

I’m having a hard time finding solutions elsewhere but essentially I just need the display sheet to be appended to add the data from the input sheet. Thank you for your help.

Answer 1

You need to communicate across windows, so the target or destination window should expose a function that receives data and inserts it into the document. You can declare a new function in the global scope of the destination window:

window.addData = function(data) {
  // Append to HTML document
}

From the source window you must get a reference to the destination window, for example by opening it:

// Open child window and call global function of child window
var destination = window.open("destination.html", "destination");
destination.addData(42);

What makes this tricky is that you have to wait for the destination window to be loaded.

If the window you have opened should talk to the original (opening) window, you can use this code inside the child window:

// Call global function of parent window
var destination = window.opener;
destination.addData(42);