在新窗口中打开一个 div - 单击按钮答案

【问题标题】：Open a div in new window - on-click of button在新窗口中打开一个 div - 单击按钮
【发布时间】：2019-05-13 10:34:48
【问题描述】：

伙计们，我正在尝试在新窗口中打开一个 div，我尝试使用 window.open，它按预期工作。

HTML：

<div id="pass">pass this to the new window</div>
<a href="#" onclick="openWin()">click</a>

JS：

  function openWin() {
    var divText = document.getElementById("pass").outerHTML;
    var myWindow = window.open('', '', 'width=200,height=100');
    var doc = myWindow.document;
    doc.open();
    doc.write(divText);
    doc.close();
  }

http://jsfiddle.net/KZYJU/

问题：如果窗口已经打开，当我再次点击按钮时，它应该不会再次打开新窗口。用户应该只能看到一个窗口。就我而言，如果我点击按钮 10 次，则会打开 10 个窗口。

请各位大侠帮帮我。

【问题讨论】：

要创建minimal reproducible example，代码应该在问题中。如果删除了那个小提琴，这个问题就没用了。（堆栈 sn-p 不适用于此代码，但您可能想阅读：How do I create a runnable stack snippet?）

标签： javascript jquery angularjs

【解决方案1】：

你可以这样做：

  var popup;

  function openWin() {
    if (popup && !popup.closed) {
      popup.focus();
      /* or do something else, e.g. close the popup or alert a warning */
    } else {
      var divText = document.getElementById("pass").outerHTML;
      popup = window.open('', '', 'width=200,height=100');
      var doc = popup.document;
      doc.open();
      doc.write(divText);
      doc.close();
    }
  }

这将检查弹出窗口是否打开，如果是则将其聚焦。

Demo

【讨论】：

【解决方案2】：

由于您可以在新窗口中编写一些脚本，因此您可以使用 cookie 在其中存储类似标志的数据，以便您知道窗口当前处于打开状态。

在主页上，您首先将标志（我将其命名为 windowOpen）设置为 false，并在每次单击链接时进行检查。如果为假，则打开新窗口；否则，什么都不做。

在随后的窗口中，在打开时将标志设置为 true，在关闭时将其设置为 false。

【讨论】：

【解决方案3】：

在调用window.open时设置一个窗口名称

window.open('', 'popupWindowName', 'width=200,height=100');

windowName 是一个 DOMString，指定要加载指定资源的浏览上下文（窗口或选项卡）的名称；如果名称不表示现有上下文，则创建一个新窗口并赋予由 windowName 指定的名称。然后，通过将该名称指定为 or 元素的目标属性，可以将该名称用作链接和表单的目标。名称不应包含空格。请记住，这不会用作窗口的显示标题。如果字符串为空，浏览器每次都会创建一个新窗口（当字符串替换为NULL时，此行为不起作用）。

Source

【讨论】：

每次点击都会刷新窗口。有没有可以从我离开的地方打开窗口？

【解决方案4】：

只需使用Boolean 标志即可。当你第一次点击它时让它成为现实。并以此加以限制。

var flag = false;
function openWin() {
  if(!flag) {
      var divText = document.getElementById("pass").outerHTML;
      var myWindow = window.open('', '', 'width=200,height=100');
      var doc = myWindow.document;
      doc.open();
      doc.write(divText);
      doc.close();
      flag = true
    }
}

<div id="pass">pass this to the new window</div>
<a href="#" onclick="openWin()">click</a>

【讨论】：