最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Open a div in new window - on-click of button - Stack Overflow

programmeradmin11浏览0评论

Guys I am trying to open a div in new window and I tried with window.open ,its working as expected.

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

/

Issue : If the window is already opened, when I click the button again, it should not open a new window again. User should be able to see only one window. In my case if I click the button 10 times ,10 windows is getting opened.

Guys please assist me on this.

Guys I am trying to open a div in new window and I tried with window.open ,its working as expected.

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/KZYJU/

Issue : If the window is already opened, when I click the button again, it should not open a new window again. User should be able to see only one window. In my case if I click the button 10 times ,10 windows is getting opened.

Guys please assist me on this.

Share Improve this question edited May 13, 2019 at 10:46 adiga 35.3k9 gold badges65 silver badges87 bronze badges asked May 13, 2019 at 10:34 krishkrish 1,1176 gold badges26 silver badges54 bronze badges 1
  • 1 To create a minimal reproducible example, the code should be in the question. If that fiddle is deleted, this question stands useless. (Stack snippet isn't working for this code but you might want to read: How do I create a runnable stack snippet?) – adiga Commented May 13, 2019 at 10:48
Add a ment  | 

4 Answers 4

Reset to default 4

You can do it like this:

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

This will check if the popup window is open or not, and if it is then it will focus it.

Demo

Since you can write some script into the new window, you could use cookies to store a flag-like data in it so that you know the window is currently open.

On the main page, you first set the flag (I will name it windowOpen) to false, and check every time the link is clicked. If it is false then open new window; otherwise, do nothing.

On the subsequent window, set the flag to true on open and set it to false on close.

Set a window name in your call to window.open

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

windowName is a DOMString specifying the name of the browsing context (window, or tab) into which to load the specified resource; if the name doesn't indicate an existing context, a new window is created and is given the name specified by windowName. This name can then be used as the target of links and forms by specifying it as the target attribute of or elements. The name should not contain whitespace. Keep in mind that this will not be used as the window's displayed title. If the string is empty, the browser will create a new window every time (this behaviour doesn't work when the string is replaced with NULL).

Source

Just play with the Boolean flag. make it true when you click it first time. and restrict it with that.

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>

发布评论

评论列表(0)

  1. 暂无评论