JavaScript弹出窗口焦点问题

Question

I want to create a "popup window" that get focus each time the button is clicked. 我想创建一个“弹出窗口”，每次单击按钮时都会获得焦点。 The function below executes fine from an onclick event but does not execute as expected when the parent page is refreshed and executed from an onload event. 下面的函数可以通过onclick事件很好地执行，但是当刷新父页面并通过onload事件执行父页面时，该函数无法按预期执行。

here is my function: 这是我的功能：

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

So if I use this from the button below it works as expected. 因此，如果我从下面的按钮使用它，它将按预期工作。

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

Now the problem I am having is we are using another method called set_mode on the button instead of directly calling the PopupDelete function. 现在我遇到的问题是，我们在按钮上使用了另一个名为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');">

It sets the mode in the master form as Delete and submits the form. 它将主表单中的模式设置为“删除”并提交表单。 The landing page is the same page where the form is. 登陆页面是表单所在的页面。 So it does some php validation and executes the PopupDelete function with onload method within the body tag. 因此，它会进行一些php验证，并在body标签内使用onload方法执行PopupDelete函数。

<body onload='PopupDelete(delete_images)'>

If there was no pop up window open it works fine but if the pop up window was already open and minimized, then the pop up window does not get the focus. 如果没有打开弹出窗口，则可以正常工作，但是如果弹出窗口已经打开并已最小化，则弹出窗口将无法获得焦点。 The funny thing is it does recognized and updates the contents rendered on the pop up window but does not recognize the .focus(). 有趣的是，它确实可以识别并更新弹出窗口上呈现的内容，但不能识别.focus（）。

Any suggestions will be widely appreciated. 任何建议将被广泛赞赏。

Answer 1

Both opening a popup window without user interaction and focusing a popup window without user interaction is a problem is due to browser security. 在没有用户交互的情况下打开弹出窗口和在没有用户交互的情况下聚焦弹出窗口都是由于浏览器安全性而引起的。 Also because security is maintained independently, this is browser specific. 同样因为安全性是独立维护的，所以这是特定于浏览器的。

It appears that you can open a popup window without user interaction if the user has already have accepted to show blocked popups. 如果用户已经接受显示阻止的弹出窗口，则似乎可以在没有用户交互的情况下打开弹出窗口。 But allowing popups does not allow for calling the focus method on any popup window object. 但是允许弹出窗口不允许在任何弹出窗口对象上调用focus方法。 This other SO answer touches on this if you would like more information. 如果您需要更多信息，此其他SO答案将涉及此内容。

You can demo this problem with the following code. 您可以使用以下代码演示此问题。 Loading the page does not allow for the popup to open in neither Safari, Chrome, or Firefox (keep in mind I'm on a mac so the browser results may be different for windows). 加载页面不允许在Safari，Chrome或Firefox中都无法打开弹出式窗口（请注意，我在Mac上，因此Windows的浏览器结果可能有所不同）。 If you allow the blocked popup, or already have the popup window open from previously visiting the site, then the window will be reloaded with the url in all 3 browsers. 如果您允许阻止的弹出窗口，或者已经从以前访问该站点的情况下打开了弹出窗口，则将在所有3个浏览器中重新加载该窗口的URL。 Only Safari allows calling the focus on this already popped up window without user interaction ( onload ), Chrome and Firefox do not. 只有Safari允许在没有用户交互（ onload ）的情况下将focus在这个已经弹出的窗口上，而Chrome和Firefox则不允许。 But as you can see clicking the focus button does still focus the popup window on all 3 browsers, showing that it is possible, but the browser is just blocking it. 但是，正如您看到的那样，单击“焦点”按钮仍会将弹出窗口集中在所有3个浏览器上，这表明有可能，但浏览器只是对其进行了阻止。 So from what I can tell this is only possible in Safari (once again keep in mind I have not tried IE). 因此，据我所知，这仅在Safari中是可行的（再次记住，我没有尝试过IE）。 But either way I don't believe it would be good to force your users to use a specific browser to view your site correctly. 但是，无论哪种方式，我都不认为强迫您的用户使用特定的浏览器正确地查看您的网站是件好事。

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 DEMO

Also keep in mind, even if you could do this, when you reloaded the parent it's reopening the popup window and replacing the previous one (and this has to be done because to my knowledge you can't get a window object of a previously opened window, there is no way to maintain that variable to focus it without reopening it first). 还要记住，即使可以这样做，在重新加载父窗口时，它也会重新打开弹出窗口并替换上一个窗口（这是必须要做的，因为据我所知，您无法获得先前打开的window对象窗口，如果不先重新打开该变量就无法维护该变量以使其聚焦。 So this popup window wouldn't keep it's integrity anyway. 因此，此弹出窗口无论如何都无法保持其完整性。 I believe there must be a better way to completing this task. 我相信必须有更好的方法来完成此任务。

Answer 2

On the page load you can show this popup 在页面加载中，您可以显示此弹出窗口

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

JavaScript弹出窗口焦点问题

问题描述

2 个解决方案

解决方案1
3 已采纳 2014-08-13 21:28:02

解决方案2
0 2014-08-20 11:46:46

JavaScript弹出窗口焦点问题

问题描述

2 个解决方案

解决方案1 3 已采纳 2014-08-13 21:28:02

解决方案2 0 2014-08-20 11:46:46

解决方案1
3 已采纳 2014-08-13 21:28:02

解决方案2
0 2014-08-20 11:46:46