html open a url on new target and focus

Question

I am trying to fix a web site.

It opens a help page in a new window/tab via <a href="..." target="help"> (no other frame has this name)

This works well the first time opening a new window/tab, for the help. But on subsequent clicks the window/tab is loaded but remains hidden.

I tried this:

<script>
    function OpenAndFocusHelp() {
        win=window.open('help/1000CH00017.htm','help');
        win.focus();
    }      
</script>

<a href="help.html" target="help" 
   onclick="OpenAndFocusHelp()">Help</a>

It did not work!

Answer 1

It seems that modern browsers do not allow you to window.focus an existing window. Or at least, it will not give that window focus. (IE9 will actually blink the tab, but most other browsers merely load it but give no indication that the user's attention should be drawn to the new window.)

Therefore, one solution that presents itself is to close the window first, and then re-open it immediately after. For example, declare the following function :

window.openOrFocus = function(url, name) {
    if (!window.popups)
        window.popups = {};
    if (window.popups[name])
        window.popups[name].close();
    window.popups[name] = window.open(url, name);
}

Now, you can write HTML such as this:

<a href="javascript:void(0);" onclick="openOrFocus('http://jsfiddle.net/k3t6x/2/', 'window1')">Window 1</a><br />
<a href="javascript:void(0);" onclick="openOrFocus('http://jsfiddle.net/KR6w3/1/', 'window2')">Window 2</a><br />

Since it closes the window first, it reliably gives focus to the newly created child window.

This solution also uses the window.popups namespace, so rename the usages of that in the javascript sample if you have a function named popups or have otherwise collided with it.

Caveat : This does not work after a post-back. This is because once you navigate away from the current page, it is no longer the owner of the child windows. Therefore, it can no longer close them. However, it merely degrades to the usual (non-focusing) behavior of using the target attribute.

Tested In: Firefox 4, Chrome 11, IE 9
JsFiddle Demo: http://jsfiddle.net/aqxBy/7/

Answer 2

我认为此功能是特定于浏览器的，您无法定义聚焦新选项卡或窗口的行为。

Answer 3

You can have such code instead:

var _arrAllWindows = new Array();
function OpenOrFocus(oLink, sTarget) {
    var oWindow = _arrAllWindows[sTarget];
    if (!oWindow || oWindow.closed) {
        oWindow = window.open(oLink.href, sTarget);
        _arrAllWindows[sTarget] = oWindow;
    }
    oWindow.focus();
    return false;
}

Then to call it, have such link:

<a href="http://www.google.com" onclick="return OpenOrFocus(this, 'help');">Open</a>

Works fine in Chrome and IE, unfortunately Firefox disable by default the option to "raise" windows in code so focus() has no effect in that browser - could not find any work around.

Test case is available here: http://jsfiddle.net/yahavbr/eVxJX/

Answer 4

Here's one way using jQuery and HTML5 with fallback for JavaScript-disabled clients. It will reload pages on every click. Tested and works in Firefox and Chrome.

<script>
    $(document).ready(function() {
        $('a[data-popup]').click(function(event) {
            event.preventDefault();
            window.open(this.href, this.dataset['popup'], 'resizable,scrollbars').focus();
        });
    });
</script>

<a href="https://stackoverflow.com/" target="_blank" data-popup="stackoverflow">Stack Overflow</a>
<a href="https://superuser.com/" target="_blank" data-popup="superuser">Super User</a>
<a href="https://serverfault.com/" target="_blank" data-popup="serverfault">Server Fault</a>