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

Question

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

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

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

Answer 1

是的，如果有：

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

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

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

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不是必需的。正如我上面所说，您可以直接使用 DOM（如果您愿意，也可以使用其他库）：

实时复制| 直播源

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>：

实时复制| 直播源

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