Doing Popups Correctly

Basically I have a website that offers a help system. When activated this help system triggers a popup in which the help content appears. As the users then navigates around the sit

Solution 1:

If your whole website is hosted at the same domain, you can use the window.opener property, in conjunction with some adjustments at your page.

1. Main: Declare a variable windowLocation, and functions setHelperWindow and popup
2. Main-popup: Open a new window, and store a reference in variable windowLocation
3. Helper-window: Create a poller, which attempts to invoke the setHelperWindow of the window.opener object. If the window.opener window has closed, the poller will terminate.

Because the windowLocation variable is getting updated all the time (either after using window.open() or by the poller function in the popup), the possibility of getting blocked by a popup blocker is reduced severely.

Note: Both scripts has to be included at each main and helper page:       <script src="filename.js"></script>

Helper.js

 (function(){
     var failures = 10*60; //Cancel poller after 1 minute without `opener`var poller = setInterval(function(){
        try{
            // Attempt to send the current location object to window.openerwindow.opener.setHelperWindow(location);
        }catch(e){
            if(!window.opener && failures-- < 0) clearInterval(poller);
        }
     }, 100);
 })();

MainPopup.js

var windowLocation;
 functionsetHelperWindow(new_windowLocation){
     windowLocation = new_windowLocation;
 }
 functionpopup(url){
     try{
         windowLocation.href = url;
     } catch(e){
         windowLocation = window.open(url, "HelperWindow").location;
     }
 }

Example: Usage (main)

<ahref="javascript:popup('/help-pages/howto-doing-popups-correctly')">Click</a>

Solution 2:

Specifying a name for the window like you have done should work, e.g.

window.open('help1.html', 'help');

Then, e.g. when page2 loads,

$(function () {
    window.open('help2.html', 'help');
});

Bear in mind though that the popup blocker is going to stop this behaviour from working unless you add an exception. E.g. in chrome, options >> under the bonnet >> content settings >> pop-ups >> manage exceptions.

Disclaimer: I'm not a fan of using popups and would use a lightsout box instead for your online help, loading the content via an ajax request.