在不同的浏览器选项卡上显示数据

Question

浏览器打开了两个带有不同 URL 的选项卡。

一个html页面从服务器接收到的数据...

是否可以在另一个已经打开而无需重新加载的选项卡中显示相同的数据...如果是这样应该怎么做...

Answer 1

是的，如果：

1. 您的代码打开了另一个选项卡（通过window.open），或者

2. 窗口有一个名称（例如通过链接上的target 属性分配的名称，例如target="otherwindow"）

此外，窗口的内容必须与您与之交互的文档同源，否则您将被Same Origin Policy 阻止。

1。如果您通过window.open 打开它

window.open 为打开的窗口返回对window 对象的引用，您可以使用它（假设它位于同一来源）进行操作。例如：

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

// ...later, when it's loaded...

var div = wnd.document.createElement('div');
div.innerHTML = "content";
wnd.document.appendChild(div);

您可以使用所有常用的 DOM 方法。如果您在另一个窗口中加载一个库，您也可以使用它。 （重要的是要了解这两个窗口有两个不同的全局命名空间，它们不是共享的。）

这是一个完整的例子。为了方便起见，我在下面使用了 jQuery，但 jQuery 是 not 所必需的。正如我上面所说的，你可以直接使用 DOM（或者如果你喜欢，也可以使用其他库）：

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);

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

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

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

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

  function addContent() {
    var div;

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

  function removeContent() {
    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");
      }
    }
  }

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

})(jQuery);

2。如果您通过target 的链接打开它

window.open 可以找到并返回对该窗口的引用：

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

请注意，URL 参数是空的，但我们将 target 属性中的名称传递给它。该窗口必须已经打开才能正常工作（否则它将打开一个完全空白的窗口）。

这是上面的例子，修改为假设你通过<a href="..." target="otherwindow">...</a>打开了窗口：

Live Copy | Live Source

HTML：

<a href="/etogel/1" target="otherwindow">Click to open the other window</a>
<br><button id="btnGet">Get Window</button>
<button id="btnAdd">Add Content</button>
<button id="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);

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

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

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

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

  function addContent() {
    var div;

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

  function removeContent() {
    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");
      }
    }
  }

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

})(jQuery);