Close javascript-popup-window from anywhere

Question

I'm trying to build a popup that can be closed from anywhere.

On the Mainpage you have the option to open it. At any point while browsing the mainpage the user shall be able to close it again.

I found this basic pop-control:

 function popuponclick()
   {
      my_window = window.open("", "mywindow","status=1,width=350,height=150");
   }

   function closepopup()
   {
      my_window.close ();
   }

The problem, as soon you leave the page from where you opened the popup, the function looses its connection and the popup won't close anymore.

Is there a way to adress and close this certain popup pagewide?

I don't want the user to bother with the popup-itself. It is just a workaround for some other problem. Further it is supposed to close itself per unload() at closing the main-page. — Kreativrandale, May 13 '13 at 15:09
If it is supposed to close itself on page unload, then why do you need another page to close it? — Derek Henderson, May 13 '13 at 15:12
What the OP wants I think is a way to close popup from page B if it was opened from page A. Page A and B are pages on the same site. I have a suspicion though that due to security your not allowed to re-ontain a reference to a pop-up from Page B, that was opened from Page A (after the user navigates from A to B). This is why I propose the parent frame solution. — Menelaos, May 13 '13 at 15:34
@meewoK, in a previous comment the OP wrote, "Further it is supposed to close itself per unload() at closing the main-page." This would suggest he doesn't need page B to close anything, just needs an `unload` handler. — Derek Henderson, May 13 '13 at 15:46
@Derek Henderson How do you interpret this statement from the OP "The problem, as soon you leave the page from where you opened the popup, the function looses its connection and the popup won't close anymore." — Menelaos, May 13 '13 at 15:49
@meewoK, the same way you did, but then the OP's comment suggested a rather different issue. — Derek Henderson, May 13 '13 at 15:51
@Derek Henderson Though the OP needs to clarify, I think the statement "as soon you leave the page from where you opened the popup" is quite clear. The issue is the reference to the window is lost, and hence closepopup does not function anymore on new pages. If it was an issue of the window not closing, than it is a simple matter of a global reference to my_window missing... — Menelaos, May 13 '13 at 15:53
@meewoK, but if all the OP wants is to close the popup automatically upon leaving the page, it doesn't matter if the reference is lost. That only is an issue if the OP wants to keep the popup open and allow another page to close it. — Derek Henderson, May 13 '13 at 15:57

score 3 · Accepted Answer · edited May 23 '17 at 12:13

3

There are three solutions I propose depending on what the problem actually is.

1) closepopup() does not work on other pages

If you need to close the popup from page B when it was opened from page A the following code will allow you to obtain a reference to the popup from page B and close it. Reference: Find window previously opened by window.open

PageA.html

<script>
 function popuponclick()
   {
      my_window = window.open("http://google.com", "mywindow","status=1,width=350,height=150");
   }

   function closepopup()
   {
      my_window.close ();
   }
</script>

<a href="javascript:popuponclick()">Open window...</a></br>
<a href="PageB.html">Go to Page B</a>

</body>
</html>

PageB.html

<html>
<body>

<script>
   function closepopup()
   {
      var popupPlayer= window.open('', 'mywindow', 'status=1,width=350,height=150') ;
      popupPlayer.focus();
      popupPlayer.close();
   }
</script>

<a href="javascript:closepopup()">Close window...</a></br>

</body>
</html>

2) closepopup() does not work on the same page as window is opened

A global reference to my_window is needed so you would need to change the code like this:

     var my_window; //global reference here
    function popuponclick()
       {
          my_window = window.open("", "mywindow","status=1,width=350,height=150");
       }

       function closepopup()
       {
          my_window.close ();
       }

3) Final third solution using frames

You separate your page into 1 frames (one which is 100%) and another that is 0%.

You add the window open/close code in the parent frame. Than you call the window control code via cross frame javascript commands.

Frames HTML Containing Javascript

<html>
<head>
<title>My example</title>

<script>

  var my_window;

 function popuponclick()
   {
      my_window = window.open("", "mywindow","status=1,width=350,height=150");
   }

   function closepopup()
   {
      my_window.close ();
   }
</script>

</head>
<frameset cols="100%,0%">
<frame src="frame.html"/>
<frame/>
</frameset>
</html>

Internal Frame (frame.html) - calling parent Javascript

<html>
<body>
<a href="javascript:parent.popuponclick()"> Open Window </a><br/>
<a href="javascript:parent.closepopup()"> Close Window </a><br/>
<a href="javascript:location.href=location.href"> Refresh Frame (and try again)</a><br/>
</body>
</html>

edited May 23 '17 at 12:13

Community

1
1

answered May 13 '13 at 15:14

Menelaos

23,508
18
90
155

Yep, thank you. But in this project is a lot of seo envolved. That doesn't work to good with iframes, does it? – Kreativrandale May 13 '13 at 15:22
@Kreativrandale, other than allowing third-party advertising on your site, I can not think of any reason why you would ever want to use iframes. IMHO, of course. – Derek Henderson May 13 '13 at 15:25
@Derek Henderson Actually I'm not referring to iframes. :) I'm referring to an old fashioned frame wrapper that will keep the reference to the window and contain the javascript. See: http://www.seo-e.com/seo-technology/ways-you-can-still-use-frames-and-have-high-rankings.htm It is possible to not ruin your SEO while using this by containing links in your frame page (using – Menelaos May 13 '13 at 15:31
1

@Kreativrandale I think I have found the solution to your problem :) You open the window on page A, than use the example here to : http://stackoverflow.com/questions/2455158/find-window-previously-opened-by-window-open to obtain a reference to page B. Than you close or do whatever you want to the window. – Menelaos May 13 '13 at 15:43
@meewoK Thank you, that looks like a good workaround. Unfortunately I have some trouble translating the solution to my problem/code. Would you help me out a little bit? – Kreativrandale May 13 '13 at 15:58
@Kreativrandale Do tell..there's an error somewhere? You can update your answer to include sample. – Menelaos May 13 '13 at 16:03
@meewoK why is the name if the window "popupPlayer" on pageB? – Kreativrandale May 13 '13 at 16:09
1

If your referring to `window.open('', 'popupPlayer', 'width=150,height=100') ;` , the second parameter should be the same as the original. If your referring to `var popupPlayer=` , you could make the variable name anything you want (it's popupPlayer because I copied directly from the reference). You can change to: `var my_window= window.open('', 'mywindow', 'status=1,width=350,height=150') ; my_window.focus(); my_window.close();` – Menelaos May 13 '13 at 16:12
@meewoK Yeah, just figured it out myself - sorry! And well, it works. And to make it even better it would be nice, if it works from another tab (just in case someone opens a new sub-page in a new tab). Is this possible too? Big thx so far! – Kreativrandale May 13 '13 at 16:16
@Kreativrandale Just tested and it does work in another tab :) – Menelaos May 13 '13 at 16:18
@meewoK Hm, closing from an other tab doesn't work for me (Chrome). Try yourself: http://hammr.co/4311256/1/index.html – Kreativrandale May 13 '13 at 16:32
@Kreativrandale I'd suspect because in chrome each tab is a separate process. You will notice you can open multiple myWindow(s) - one per tab... – Menelaos May 13 '13 at 16:39
Yeh, multiple windows is what I can't have. But if there is no way to achieve this, I will fit the design to what is possible. Thank you! – Kreativrandale May 13 '13 at 16:51
1

@Kreativrandale I opened this issue as another question: http://stackoverflow.com/questions/16527205/find-window-previously-opened-by-window-open-in-new-tab-in-chrome – Menelaos May 13 '13 at 16:52
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/29861/discussion-between-meewok-and-kreativrandale) – Menelaos May 13 '13 at 16:57
@meewoK Awesome, thank you! Im looking forward to the answers. Favd. – Kreativrandale May 13 '13 at 17:05
@meewoK I've tried the approach in your new Topic. Would you have a look there? – Kreativrandale May 14 '13 at 14:48

score 0 · Answer 2 · answered May 13 '13 at 15:31

0

If you are trying to close it from an iframe...

top.my_window.close();

I believe you need to go out a level since that variable is set on the parent window. Not in the iframe.

answered May 13 '13 at 15:31

teewuane

5,524
5
37
43

score 0 · Answer 3 · answered May 13 '13 at 15:49

0

If you just need the popup to be closed automatically when you leave the main page (as suggested in a comment), you just need to do the following:

$(window).unload(closepopup);

answered May 13 '13 at 15:49

Derek Henderson

9,388
4
42
71

Close javascript-popup-window from anywhere

3 Answers3

1) closepopup() does not work on other pages

2) closepopup() does not work on the same page as window is opened

3) Final third solution using frames

Linked