Open a div in new window - on-click of button

Question

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.net/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.

Answer 1

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

Answer 2

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> 

Answer 3

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.

Answer 4

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