Rick Strahl's Web Log

Wind, waves, code and everything in between...
ASP.NET • C# • HTML5 • JavaScript • AngularJs
Contact   •   Articles   •   Products   •   Support   •   Search
Ad-free experience sponsored by:
ASPOSE - the market leader of .NET and Java APIs for file formats – natively work with DOCX, XLSX, PPT, PDF, images and more

Forcing Client Windows to pop up as Windows in Tabbed Browsers


By default if you open a new window in Tab based browsers like FireFox 3 or IE 7 new windows pop up in new tabs. In most situations this is the desirable behavior, but sometimes it's in fact required to get a new window to pop up on the desktop and get it activated immediately.

I ran into this situation today in a complex Intranet application that basically allows editing of several sets of related data simultaneously to content in the 'main' window. While I fully agree with the the school of thought that believes too many windows in Web UIs are evil, in this situation I really couldn't see good alternatives. Alternatives are opening in Tabs (not acceptable if more than one window gets opened at a time) or using DOM internal pop up windows (ala HoverPanel). The latter also isn't really acceptable as the pop up forms are rather complex and page management would get increasingly complex to manage in a single page especially since often times the SAME forms are popped up with different data.

So in the end I decided separate windows  are probably the best choice. It's been a while since I had last thought about this so I figured a quick window.open() would be all that's needed but as I found out, that only opens new tabs. How do you 'force' windows to open as windows rather than in a new tab?

As it turns out it's quite simple to do - you can specify a few  parameters in the window options to effectively force the window to pop up as a window instead of loading into a tab:

var childWindows = [];

 
function showApplet(appletName,id)
{
   var win = window.open( String.format("applet.aspx?applet={0}&id={1}",appletName,id),
"_blank",
                    "resizable=yes,scrollbars=yes,width=800,height=600,status=yes" );
   win.focus();  // force active
   childWindows.push(win);  // save for later release
}
 

Any time window.open() specifies parameters that are explicitly attributable to a 'window' - like resizable, scrollbars or height or width - the window does in fact get popped up as a window. Omit any of these window specific parameters and the window loads using the browser's default settings. Note the win.focus() which is useful in forcing the new window to be activated. This is especially useful if you create only one new window and repeatedly load content into it as these windows generally do not come to the top of the desktop window stack.

Speaking of default settings, window loading can also be controlled via the browser settings. In FireFox you can specify whether to open windows in tabs or in a new window:

WindowOrTabs

Other browsers have similar options.

However, the above code snippet allows overriding these settings so there really should never be a reason to choose the Open in New Window option.

Cleaning up Opened Windows

Note that when building your own applications and forcing windows to pop up it's often also important to remove windows again when you're done with your page, or after an operation has completed. In my app scenario for example I had to close a window after some action occurred in the child window or a final Save operation occurs in the main window for example.

So it's useful to keep track of windows opened in a page and then maybe even automatically close the child windows when the page is navigated off of. You'll notice in the code above that windows are stored in a childWindows array, which is done for precisely this reason. To close out all windows the following code is used:

 
function unloadChildWindows()
{    
    for (var x=childWindows.length-1; x > -1; x--)
    {
        var win = childWindows.pop();
        win.close();
        win = null;
    } 
}
$(document).ready(function(){
    $(window).unload( unloadChildWindows );        
});

which runs through each of the child windows and closes them. If you want to automatically close all windows when the page is closed or navigated off of you also hook the window.unload event and fire this function - here using jQuery to fire the event and route it to the function.

All that said, it shouldn't be often that you need to pop up windows on a Web page. It's a bad Web UI practice in general, but in those occasions that you must it's usually a requirement that can't be worked around. Hopefully this will be useful to you in those rare circumstances.

Posted in HTML  JavaScript  

The Voices of Reason


 

Steven Berkovitz
July 22, 2008

# re: Forcing Client Windows to pop up as Windows in Tabbed Browsers

This is similiar to a component I authored for managing popup windows. Mine does however have an additional feature where it will check for a duplicate window (based on URL) and optionaly focus that window instead of opening a duplicate.

http://mbccs.blogspot.com/2008/07/popup-window-manager.html

Josh Stodola
July 22, 2008

# re: Forcing Client Windows to pop up as Windows in Tabbed Browsers

I would consider using the features parameter of window.open() to dictate the behavior of popups to be a shameful browser bug. The user should be fully in charge this behavior! I should be able to configure my browser to open links/popups the way I want. I will right-click if I want to open a new window, and use the scroll-wheel-click to open in a new tab, and use the left-click to open in the same window.

I do understand this is a little different scenario though because Javascript is involved. But still, using "_blank" as the window name should open in a new window, and "_self" should open a new tab. Simple as that.

Mike Gale
July 22, 2008

# re: Forcing Client Windows to pop up as Windows in Tabbed Browsers

Josh,

That may cover the full range of what you do with the web but it's not the whole story.

1) I've seen apps that worked well until this tabbed interface messed them up.

2) I've seen a lot of users who don't know about the opening options, and more who do know who just about never use it.

3) In addition I've worked on interfaces where the user 'pushes a button' to open a window. He doesn't have or expect control.

If I read your post right you seem antagonistic to these situations.

Josh Stodola
July 22, 2008

# re: Forcing Client Windows to pop up as Windows in Tabbed Browsers

Mike, you're right, I'm an above-average user. The bottom line is, and the point I was trying to make was (apologies for my bad choice of words, but I truly suck at writing) that Javascript has NO BUSINESS overriding browser preferences, especially wtih regards to popup behavior. It's counter-productive to an ideal solution (yes, forgot the almighty "IMO"). Sure there are plenty of users that don't know how to control this, and several users that dont CARE to control this. That's why semantic defaults are a necessity. Eventually, people will grow accustomed to the right way instead of the "take what you can get" way.

Best regards...

Andrew D
July 22, 2008

# re: Forcing Client Windows to pop up as Windows in Tabbed Browsers

What the heck is with this use of 'x' instead of 'i' in a for loop? Next you'll be failing to call two random variables 'foo' and 'bar'.

Rick Strahl
July 23, 2008

# re: Forcing Client Windows to pop up as Windows in Tabbed Browsers

@Andrew - <snicker> You young snappers you! I've grown up in CS with x as loop variables - hard to break the habit. Then again: As if i is any more descriptive than x <g>...

@Josh - the problem is that _blank alone will not give you a new window. It'll go into a tab (or whatever your browser preference is). Again I think 90% of the time that IS the right thing to do, but I think it's good to know that you can when necessary force a window to pop up.

Along the same lines popping up new content in tabs really is often very obtuse. With FF's default settings (which can be changed though) if you have FF as your default browser for example, FF will open a system URL request in a new tab without activating the window or the tab in the background for example. It's hard to even notice it's happened. Same thing in the browser. The behavior can be changed but going just off the defaults (which most users are going to be doing) often is not the most desirable path of action in certain scenarios.

AzamSharp
July 23, 2008

# re: Forcing Client Windows to pop up as Windows in Tabbed Browsers

Hi Rick,

I used a similar approach for closing the child windows when the parent window is closed. You can check out my blog post using the following URL:

http://www.azamsharp.com/Posts/58_Closing_Child_Windows_When_the_Parent_is_Closed.aspx

One of the problems of firing the onunload event is that if you have the pop up windows opened and you refresh the browser then it will also fire the onunload event and all the pop up windows will be closed.

OecherCoder Blog
July 24, 2008

# Forcing Client Windows to pop up as Windows in Tabbed Browsers

<p>In den aktuellen Browsern (Firefox 3 oder IE 7) werden neuen Seiten beim Aufruf durch eine Webapplikation in einem neuen Tab, anstatt in einem neuen Fenster, geöffnet. Soll die neue Seit ...

Fred
July 26, 2008

# re: Forcing Client Windows to pop up as Windows in Tabbed Browsers

hello

Rick, what tool are you using for your screen copy

Rick Strahl
July 26, 2008

# re: Forcing Client Windows to pop up as Windows in Tabbed Browsers

SnagIt from Techsmith (www.techsmith.com/screen-capture.asp). Indispensible tool for me and best of all it also can be automated so I have it pluged into LiveWriter for blogging (like above - one click image insertion from captures) and some of our commercial tools like Help Builder. Not free, but worth the $49 I think it is now.
 

West Wind  © Rick Strahl, West Wind Technologies, 2005 - 2017