显示不同浏览器标签上的数据

Question

浏览器有两个使用不同网址打开的标签。

来自服务器的一个html页面收到的数据......

是否可以在另一个已经打开但没有重新加载的标签中显示相同的数据......如果是这样，应该怎么做......

Answer 1

是，如果：

1. 您的代码打开了其他标签（通过window.open）或

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

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

1。如果您是通过window.open

打开它

window.open返回对已打开窗口的window对象的引用，该对象（假设它位于相同的原点）可以执行操作。 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);

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

这是一个完整的例子。我在下面使用jQuery只是为了方便，但jQuery 不需要这个。如上所述，您可以直接使用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);