html打开新目标和焦点的网址

时间:2010-12-28 13:48:53

标签: javascript html

我正在尝试修复一个网站。

它会通过<a href="..." target="help">在新窗口/标签页中打开帮助页面(没有其他框架具有此名称)

第一次打开新窗口/标签时,这很有效,可以获得帮助。 但是在随后的点击中,窗口/选项卡已加载但仍保持隐藏状态。

我试过了:

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

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

它不起作用!

4 个答案:

答案 0 :(得分:7)

现代浏览器似乎不允许您window.focus现有窗口。或者至少,它不会给那个窗口焦点。 (IE9实际上会闪烁选项卡,但大多数其他浏览器只是加载它,但没有表明应该将用户的注意力吸引到新窗口。)

因此,一个解决方案就是首先关闭窗口,然后立即重新打开它。例如,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);
}

现在,您可以编写如下HTML:

<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 />

因为它首先关闭窗口,所以它可靠地将焦点放在新创建的子窗口上。

此解决方案还使用window.popups命名空间,因此如果您有一个名为popups的函数或者与其发生冲突,则重命名javascript示例中的用法。

警告:这在回发后无效。这是因为一旦您离开当前页面,它就不再是子窗口的所有者。因此,它不能再关闭它们。但是,它只会降低到使用target属性的常规(非聚焦)行为。

经过测试: Firefox 4,Chrome 11,IE 9 JsFiddle演示: http://jsfiddle.net/aqxBy/7/

答案 1 :(得分:3)

我认为此功能是特定于浏览器的,您无法定义聚焦新标签或窗口的行为。

答案 2 :(得分:2)

您可以改为使用此类代码:

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;
}

然后打电话给它,有这样的链接:

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

在Chrome和IE中工作得很好,遗憾的是,默认情况下,Firefox会禁用代码中“提升”窗口的选项,因此focus()在该浏览器中无效 - 无法找到解决方法。

此处提供了测试用例:http://jsfiddle.net/yahavbr/eVxJX/

答案 3 :(得分:1)

这是使用jQuery和HTML5的一种方法,用于禁用JavaScript的客户端的后备。它会在每次点击时重新加载页面。经过测试,适用于Firefox和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>