0

ブラウザには、異なる URL で開かれた 2 つのタブがあります。

サーバーから1つのhtmlページで受信したデータ...

リロードせずに、すでに開いている別のタブに同じデータを表示することはできますか?その場合、どうすればよいですか?

4

1 に答える 1

5

はい、次のいずれかの場合:

  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 メソッドはすべて使用できます。別のウィンドウでライブラリをロードすると、それも使用できます。(2 つのウィンドウには 2 つの異なるグローバル名前空間があり、共有されていないことを理解することが重要です。)

これが完全な例です。以下では便宜上 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);
于 2012-12-04T15:16:24.790 に答える