Javascript弹出窗口焦点问题

时间:2014-07-18 16:57:55

标签: javascript html

我想创建一个"弹出窗口"每次单击按钮时都会获得焦点。下面的函数从onclick事件执行正常,但是当从onload事件刷新并执行父页面时,它不会按预期执行。

这是我的功能:

function PopupDelete(delete_images)
{
    var win = window.open('URL','PopupDelete','width=500,height=400,scrollbars=yes');
    win.focus();
}

因此,如果我从下面的按钮使用它,它会按预期工作。

<input type="button" name="delete" value="Images" class="smallbutton" onclick="PopupDelete(delete_images);">

现在我遇到的问题是我们在按钮上使用另一个名为set_mode的方法,而不是直接调用PopupDelete函数。

function set_mode(mode) 
{
    document.MASTER.mode.value = mode;
    document.MASTER.submit();
}

<input type="button" name="delete" value="Images" class="smallbutton" onclick="set_mode('delete');">

它将主表单中的模式设置为Delete并提交表单。登录页面是表单所在的页面。所以它做了一些php验证,并在body标签内用PopupDelete方法执行onload函数。

<body onload='PopupDelete(delete_images)'>

如果没有弹出窗口打开它可以正常工作,但如果弹出窗口已经打开并最小化,则弹出窗口不会获得焦点。有趣的是它确实识别并更新了弹出窗口中呈现的内容,但无法识别.focus()。

任何建议都会受到广泛赞赏。

2 个答案:

答案 0 :(得分:3)

在没有用户交互的情况下打开弹出窗口并且在没有用户交互的情况下聚焦弹出窗口都是一个问题,这是由于浏览器的安全性。此外,由于安全性是独立维护的,因此这是特定于浏

如果用户已经接受显示阻止的弹出窗口,您似乎可以在没有用户交互的情况下打开弹出窗口。但允许弹出窗口不允许在任何弹出窗口对象上调用focus方法。 This other SO answer touches on this如果您想了解更多信息。

您可以使用以下代码demo此问题。加载页面不允许在Safari,Chrome或Firefox中打开弹出窗口(请记住,我在Mac上,因此浏览器结果可能与Windows不同)。如果您允许阻止弹出窗口,或者已经从之前访问该站点打开了弹出窗口,则将在所有3个浏览器中使用该URL重新加载该窗口。只有Safari允许在没有用户交互(focus)的情况下调用此弹出窗口中的onload,而Chrome和Firefox则不会。但正如您所看到的那样,单击焦点按钮仍会将弹出窗口集中在所有3个浏览器上,表明它是可能的,但浏览器只是阻止它。所以从我可以告诉我这只有可能在Safari(再次记住我没有尝试IE)。但无论哪种方式,我都不相信强迫您的用户使用特定浏览器正确查看您的网站会很好。

var w;

function PopupDelete(delete_images) {
    w = window.open('/testing/t/', 'PopupDelete', 'width=500,height=400,scrollbars=yes');
    console.log(w);
    w.focus();
}

$(function () {
    PopupDelete();

    $('#open').click(PopupDelete);
    $('#focus').click(function () {
        console.log('f', w);
        w.focus();
    });
});

DEMO

另外请记住,即使你可以这样做,当你重新加载父母时,它会重新开启弹出窗口并替换上一个(因为据我所知,你可以这样做)不能获得先前打开的窗口的window对象,没有办法保持该变量以便在不重新打开它的情况下对其进行聚焦。所以这个弹出窗口无论如何都不会保持它的完整性。我相信必须有更好的方法来完成这项任务。

答案 1 :(得分:0)

在页面加载中,您可以显示此弹出窗口

$(document).ready(function () {
    window.open("URL","Hello","width=500,height=500,scrollbars=yes")
});