I am trying to build a jquery script that will open a new browser window (popup window) for a mail like application (user can double click on mails and they will open in a new window).

That is not particular hard. My problem is that I want to keep track of the opened windows, so that if a user double clicks on the same mail item a second time, it will just set focus on the already open popup window, and not reload it.

I have it working in Firefox, but Internet Explorer returns the following error:

Line: 51
Error: The interface is unknown.

In particular, it happens when the users has closed a popup window, and then double click on the mail item to open it again.

My javascript/jquery skills are rudimentary at best, so I hope somebody here can help out. Here is the code for the script.

(function($)
{
    var _popupTracker = {}
    var _popupCounter = 0;
    $.fn.openPopupWindow = function(options)
    {
        var defaults = {
            height: 600, // sets the height in pixels of the window.
            width: 600, // sets the width in pixels of the window.
            toolbar: 0, // determines whether a toolbar (includes the forward and back buttons) is displayed {1 (YES) or 0 (NO)}.
            scrollbars: 0, // determines whether scrollbars appear on the window {1 (YES) or 0 (NO)}.
            status: 0, // whether a status line appears at the bottom of the window {1 (YES) or 0 (NO)}.
            resizable: 1, // whether the window can be resized {1 (YES) or 0 (NO)}. Can also be overloaded using resizable.
            left: 0, // left position when the window appears.
            top: 0, // top position when the window appears.
            center: 0, // should we center the window? {1 (YES) or 0 (NO)}. overrides top and left
            createnew: 0, // should we create a new window for each occurance {1 (YES) or 0 (NO)}.
            location: 0, // determines whether the address bar is displayed {1 (YES) or 0 (NO)}.
            menubar: 0 // determines whether the menu bar is displayed {1 (YES) or 0 (NO)}.
        };

        var options = $.extend(defaults, options);

        var obj = this;

        // center the window
        if (options.center == 1)
        {
            options.top = (screen.height - (options.height + 110)) / 2;
            options.left = (screen.width - options.width) / 2;
        }

        var parameters = "location=" + options.location +
                         ",menubar=" + options.menubar +
                         ",height=" + options.height +
                         ",width=" + options.width +
                         ",toolbar=" + options.toolbar +
                         ",scrollbars=" + options.scrollbars +
                         ",status=" + options.status +
                         ",resizable=" + options.resizable +
                         ",left=" + options.left +
                         ",screenX=" + options.left +
                         ",top=" + options.top +
                         ",screenY=" + options.top;

        // target url
        var target = obj.attr("href");       

        // test if popup window is already open, if it is, just give it fokus.        
        var popup = _popupTracker[target];
        if (options.createnew == 0 && popup !== undefined && !popup.closed)
        {            
            popup.focus();
        } 
        else
        {
            var name = "PopupWindow" + _popupCounter;
            _popupCounter++;

            // open window
            popup = window.open(target, name, parameters);            
            _popupTracker[target] = popup;
            _popupTracker[target].focus();
        }

        return false;
    };        
})(jQuery);

The line of code that is giving me the error is:

if (options.createnew == 0 && popup !== undefined && !popup.closed)

Thanks, Egil.

UPDATE: Turns out that this is in fact a IE8 thing, at least the version in the Windows 7 beta. I put up a test page (.htm) and it seems to work as expected in from my colleagues IE7. Gah, time wasted!

UPDATE 2: I should probably tell how to reproduce the error. Go to .htm, click on one of the links, i.e. "something 1", after the popup finishes loading, tab back to to parent window, and click on the same link again. This time, the popup window will just receive focus again, and NOT reload (this is intentionally and what I want). Now close the popup window, and then click on the same link again. This produces the error in the IE8 beta. In Firefox it correctly reopens.

I am trying to build a jquery script that will open a new browser window (popup window) for a mail like application (user can double click on mails and they will open in a new window).

That is not particular hard. My problem is that I want to keep track of the opened windows, so that if a user double clicks on the same mail item a second time, it will just set focus on the already open popup window, and not reload it.

I have it working in Firefox, but Internet Explorer returns the following error:

Line: 51
Error: The interface is unknown.

In particular, it happens when the users has closed a popup window, and then double click on the mail item to open it again.

My javascript/jquery skills are rudimentary at best, so I hope somebody here can help out. Here is the code for the script.

(function($)
{
    var _popupTracker = {}
    var _popupCounter = 0;
    $.fn.openPopupWindow = function(options)
    {
        var defaults = {
            height: 600, // sets the height in pixels of the window.
            width: 600, // sets the width in pixels of the window.
            toolbar: 0, // determines whether a toolbar (includes the forward and back buttons) is displayed {1 (YES) or 0 (NO)}.
            scrollbars: 0, // determines whether scrollbars appear on the window {1 (YES) or 0 (NO)}.
            status: 0, // whether a status line appears at the bottom of the window {1 (YES) or 0 (NO)}.
            resizable: 1, // whether the window can be resized {1 (YES) or 0 (NO)}. Can also be overloaded using resizable.
            left: 0, // left position when the window appears.
            top: 0, // top position when the window appears.
            center: 0, // should we center the window? {1 (YES) or 0 (NO)}. overrides top and left
            createnew: 0, // should we create a new window for each occurance {1 (YES) or 0 (NO)}.
            location: 0, // determines whether the address bar is displayed {1 (YES) or 0 (NO)}.
            menubar: 0 // determines whether the menu bar is displayed {1 (YES) or 0 (NO)}.
        };

        var options = $.extend(defaults, options);

        var obj = this;

        // center the window
        if (options.center == 1)
        {
            options.top = (screen.height - (options.height + 110)) / 2;
            options.left = (screen.width - options.width) / 2;
        }

        var parameters = "location=" + options.location +
                         ",menubar=" + options.menubar +
                         ",height=" + options.height +
                         ",width=" + options.width +
                         ",toolbar=" + options.toolbar +
                         ",scrollbars=" + options.scrollbars +
                         ",status=" + options.status +
                         ",resizable=" + options.resizable +
                         ",left=" + options.left +
                         ",screenX=" + options.left +
                         ",top=" + options.top +
                         ",screenY=" + options.top;

        // target url
        var target = obj.attr("href");       

        // test if popup window is already open, if it is, just give it fokus.        
        var popup = _popupTracker[target];
        if (options.createnew == 0 && popup !== undefined && !popup.closed)
        {            
            popup.focus();
        } 
        else
        {
            var name = "PopupWindow" + _popupCounter;
            _popupCounter++;

            // open window
            popup = window.open(target, name, parameters);            
            _popupTracker[target] = popup;
            _popupTracker[target].focus();
        }

        return false;
    };        
})(jQuery);

The line of code that is giving me the error is:

if (options.createnew == 0 && popup !== undefined && !popup.closed)

Thanks, Egil.

UPDATE: Turns out that this is in fact a IE8 thing, at least the version in the Windows 7 beta. I put up a test page (http://egil.dk/popuptest/popup-source.htm) and it seems to work as expected in from my colleagues IE7. Gah, time wasted!

UPDATE 2: I should probably tell how to reproduce the error. Go to http://egil.dk/popuptest/popup-source.htm, click on one of the links, i.e. "something 1", after the popup finishes loading, tab back to to parent window, and click on the same link again. This time, the popup window will just receive focus again, and NOT reload (this is intentionally and what I want). Now close the popup window, and then click on the same link again. This produces the error in the IE8 beta. In Firefox it correctly reopens.

• javascript
• jquery
• internet-explorer
• popupwindow

• +1 for this nice little plugin. Cheers. – karim79 Commented Mar 16, 2010 at 11:07

3 Answers 3

The only thing that I noticed is that you have an extra ma after menubar in your defaults. After removing that last ma it worked fine for me on IE7. What version if IE is giving you this problem?

The following seems to be working for me. If anyone can improve it, please do!

In Firefox, the popup just gets focus if it's open. In IE8, the "interface is unknown" error is caught and the popup is closed and reopened instead. In all cases, the window.open line loads the current 'page' into the popup.

var bigimg;  // set this variable outside the function so the first time 
             // the popup opens, bigimg is a defined variable and the if's don't choke.

function popupbigpic(page) 
  {
  try
    {
    if(window.focus && bigimg) bigimg.focus(); 
    }
  catch(err)
    {
    if(bigimg) bigimg.close();
    }
  bigimg = window.open(page,"popup","width=670,height=665,toolbar=no");
  }

I had issue with IE 8 that window.open was not working, I just replaced the window name with null, I got idea from http://msdn.microsoft./en-us/library/ms536651.aspx

window.open("Sample.htm",null, "height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");