Open Browser Window and Bring to Front

by James Cook on July 23, 2009

One Dreamweaver feature that been around for a while is the Open Browser Window (OBW for short) behavior. Described simply, the behavior is a JavaScript that opens a page in a new window while at the same time specifying the size, attributes (scrollbars, resize handles. etc.) and name of the window. Once a window is created and named in this manner it can be targeted by additional instances of the OBW behavior or even regular links.

The problem is that - in Explorer and Firefox - when you target a preexisting window with the OBW behavior, the new page opens but the targeted window does not come to the front (technically, the targeted window does not gain focus). That means that your new page opens but the user doesn't see it because it's hidden. Probably not the solution you were looking for.

Here's an example created using DW's built-in OBW behavior. If you're using Explorer of Firefox (Safari users don't have this problem), click on the first link below and a new window - which I'm naming "popup" - will open. Make sure that "popup is positioned over this window, leave it open, return to this page and click on the second link.

Open Page 1 then come back and Open Page 2

The second link opens a new page in the existing "popup' window but you won't see it because it's hidden behind this window. To verify that the new page opened, minimize (But don't close!) this window. I'd hate to lose you just when things are getting interesting! Once you're curiosity is satisfied, leave the pop-up window open and maximize this window.

What you'd really like to happen is what happens when you click on the link below.

Open Page 3

Notice that the new page opens in the existing "popup" window AND the window comes to the front. Fortunately, all it takes to work this magic is the substitution of a few lines of code in the JavaScript function MM_openBrWindow that Dreamweaver creates to handle the OBW behavior. Here's all you need to do:

  1. In Dreamweaver, using the Behaviors palette, attach the OPB behavior to an object in your page.
  2. Switch to either the Code or Split view.
  3. Near the top of the code of your page, somewhere between the opening head and closing head tags (<head> and </head> respectively) locate the following three lines of code which define the MM_openBrWindow function:
    function MM_openBrWindow(theURL,winName,features) { //v2.0
    window.open(theURL,winName,features);
    }
  4. Copy the code below and use it to replace the code you located in step 3 above.
    function MM_openBrWindow(theURL,winName,features) {
    newwindow=window.open(theURL,winName,features);
    if (window.focus) {newwindow.focus()}
    }
  5. That's it! Now whenever you use the Open Browser Window Behavior in your page you can rest assured the window will pop to the front and be visible. Just remember, since DW inserts the JavaScript in the page (and that's where we customized it), you'll need to make this change on every page where you use the OBW behavior.

Note: When using the links relative to site root option, this customized script will fail using DW's Preview in Browser feature. However it will function properly when uploaded to your web server. Using links relative to document avoids the problem all together.

Jon Berry March 26, 2014 at 8:40 am

This worked great for bringing the window back into focus and not having it “hide” forever. Really helpful, thanks!

cherliz January 8, 2010 at 5:30 pm

nice solution, -thanks-
now for another problem with open browser window… and behavior.
I want to start using strict xhtml.
It is NOT allowed (that is if I want my pages to validate) to use : target _blank to open a NEW browser window and keep the current one open.
I prefer a new browser window for links that navigate away from the existing domain.

With the behavior option and new browser window, a new browser window is opened, but in the place of the current one.
That’s a bummer.
I see in the code that there is “parent’, I tried to be smart and replace it by blank. But that didn’t help.
HOW can this problem be solved? I’ve been googling and reading for over 1.5 days now….
Thanks for your assistance in this.

jcook January 8, 2010 at 6:04 pm

I’m not sure strict xhtml is worth it in this case but here’s an article on doing it with javascript: http://articles.sitepoint.com/article/standards-compliant-world

Peter Andrews November 17, 2009 at 6:47 pm

This was very helpful to me while helping my non-programmer brother with his website.

Dan Grant July 31, 2009 at 4:34 pm

You guys are awesome. Excellent tech note, RIGHT ON THE MONEY!!
And very easy to understand. Keep up the great work!!

Comments on this entry are closed.

Previous post:

Next post:

Home | Make Contact