Display Data On Different Browser Tabs

The browser has two tabs opened with the different URL. The data received by one html page from server... Is it possible to display the same data in another tab which is already o

Solution 1:

Yes, if either:

1. Your code opened the other tab (via window.open), or

2. The window has a name (such as one assigned via the target attribute on a link, e.g. target="otherwindow")

Additionally, the window's content must be on the same origin as the document you're interacting with it from, or you'll be blocked by the Same Origin Policy.

1. If you're opening it via window.open

window.open returns a reference to the window object for the window that was opened, which (assuming it's on the same origin) you can do things with. E.g.:

var wnd = window.open("/some/url");

// ...later, when it's loaded...var div = wnd.document.createElement('div');
div.innerHTML = "content";
wnd.document.appendChild(div);

You can use all of the usual DOM methods. If you load a library in the other window, you can use that as well. (It's important to understand that the two windows have two different global namespaces, they're not shared.)

Here's a full example. I used jQuery in the below just for convenience, but jQuery is not required for this. As I said above, you can use the DOM directly (or another library if you like):

Live Copy | Live Source

HTML:

<button id="btnOpen">Open Window</button>
<button id="btnAdd">Add Content</button>
<button id="btnRemove">Remove Content</button>

JavaScript:

(function($) {
  var btnOpen,
      btnAdd,
      btnRemove,
      wnd,
      wndTimeout,
      wnd$,
      newContentId = 0;

  btnOpen   = $("#btnOpen");
  btnAdd    = $("#btnAdd");
  btnRemove = $("#btnRemove");
  updateButtons();

  btnOpen.click(openWindow);
  btnAdd.click(addContent);
  btnRemove.click(removeContent);

  functionupdateButtons() {
    btnOpen[0].disabled = !!wnd;
    btnAdd[0].disabled = !wnd$;
    btnRemove[0].disabled = !wnd$;
  }

  functionopenWindow() {
    if (!wnd) {
      display("Opening window");
      wnd$ = undefined;
      wndTimeout = newDate().getTime() + 10000;
      wnd = window.open("/etogel/1");
      updateButtons();
      checkReady();
    }
  }

  functionwindowClosed() {
    display("Other window was closed");
    wnd = undefined;
    wnd$ = undefined;
    updateButtons();
  }

  functioncheckReady() {
    if (wnd && wnd.jQuery) {
      wnd$ = wnd.jQuery;
      wnd$(wnd).on("unload", windowClosed);
      updateButtons();
    }
    else {
      if (newDate().getTime() > wndTimeout) {
        display("Timed out waiting for other window to be ready");
        wnd = undefined;
      }
      else {
        setTimeout(checkReady, 10);
      }
    }
  }

  functionaddContent() {
    var div;

    if (wnd$) {
      ++newContentId;
      display("Adding content '" + newContentId + "'");
      wnd$("<div>").addClass("ourcontent").html("Added content block #" + newContentId).appendTo(wnd.document.body);
    }
  }

  functionremoveContent() {
    var div;

    if (wnd$) {
      div = wnd$("div.ourcontent").first();
      if (div[0]) {
        display("Removing div '" + div.html() + "' from other window");
        div.remove();
      }
      else {
        display("None of our content divs found in other window, not removing anything");
      }
    }
  }

  functiondisplay(msg) {
    $("<p>").html(String(msg)).appendTo(document.body);
  }

})(jQuery);

2. If you're opening it via a link with target

window.open can find and return a reference to that window:

var wnd = window.open("", "otherwindow");

Note that the URL argument is empty, but we pass it the name from the target attribute. The window must already be open for this to work (otherwise it will open a completely blank window).

Here's the above example, modified to assume you've opened the window via <a href="..." target="otherwindow">...</a>:

Live Copy | Live Source

HTML:

<ahref="/etogel/1"target="otherwindow">Click to open the other window</a><br><buttonid="btnGet">Get Window</button><buttonid="btnAdd">Add Content</button><buttonid="btnRemove">Remove Content</button>

JavaScript:

(function($) {
  var btnGet,
      btnAdd,
      btnRemove,
      wnd,
      wndTimeout,
      wnd$,
      newContentId = 0;

  btnGet    = $("#btnGet");
  btnAdd    = $("#btnAdd");
  btnRemove = $("#btnRemove");
  updateButtons();

  btnGet.click(getWindow);
  btnAdd.click(addContent);
  btnRemove.click(removeContent);

  functionupdateButtons() {
    btnGet[0].disabled = !!wnd;
    btnAdd[0].disabled = !wnd$;
    btnRemove[0].disabled = !wnd$;
  }

  functiongetWindow() {
    if (!wnd) {
      display("Getting 'otherwindow' window");
      wnd$ = undefined;
      wndTimeout = newDate().getTime() + 10000;
      wnd = window.open("", "otherwindow");
      updateButtons();
      checkReady();
    }
  }

  functionwindowClosed() {
    display("Other window was closed");
    wnd = undefined;
    wnd$ = undefined;
    updateButtons();
  }

  functioncheckReady() {
    if (wnd && wnd.jQuery) {
      wnd$ = wnd.jQuery;
      wnd$(wnd).on("unload", windowClosed);
      updateButtons();
    }
    else {
      if (newDate().getTime() > wndTimeout) {
        display("Timed out looking for other window");
        wnd = undefined;
        updateButtons();
      }
      else {
        setTimeout(checkReady, 10);
      }
    }
  }

  functionaddContent() {
    var div;

    if (wnd$) {
      ++newContentId;
      display("Adding content '" + newContentId + "'");
      wnd$("<div>").addClass("ourcontent").html("Added content block #" + newContentId).appendTo(wnd.document.body);
    }
  }

  functionremoveContent() {
    var div;

    if (wnd$) {
      div = wnd$("div.ourcontent").first();
      if (div[0]) {
        display("Removing div '" + div.html() + "' from other window");
        div.remove();
      }
      else {
        display("None of our content divs found in other window, not removing anything");
      }
    }
  }

  functiondisplay(msg) {
    $("<p>").html(String(msg)).appendTo(document.body);
  }

})(jQuery);