html - Javascript pop-up window focus issue

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.

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.

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.

<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().

Any suggestions will be widely appreciated.

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.

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');">

<body onload='PopupDelete(delete_images)'>

Any suggestions will be widely appreciated.

Share Improve this question edited Aug 20, 2014 at 11:34 user3942918 26.4k13 gold badges56 silver badges68 bronze badges asked Jul 18, 2014 at 16:57 dishwasherWithProgrammingSkill 5417 silver badges23 bronze badges

3 Please see automatic open pop-up new window using Javascript. Basically for security reasons browsers don't allow new windows to be opened without user action, such as a click (which is why it works the first time, because you're clicking the link.) – Adam Merrifield Commented Aug 13, 2014 at 19:52
It works fine multiple times, it only does not get focus if the pop up window was minimized. If I close it and click to open pop up, it gets the focus back. – dishwasherWithProgrammingSkill Commented Aug 13, 2014 at 20:27
I would look into creating a modal/lightbox. Creating something within your page gives you far more control (and far better user experience) than a popup window. – Laurens Kling Commented Aug 20, 2014 at 15:24

Add a ment |

2 Answers 2

Sorted by: Reset to default 3 +50

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. This other SO answer touches on this if you would like more information.

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). 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. Only Safari allows calling the focus on this already popped up window without user interaction (onload), Chrome and Firefox do not. 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. So from what I can tell this is only possible in Safari (once again keep in mind I have not tried 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

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). So this popup window wouldn't keep it's integrity anyway. I believe there must be a better way to pleting this task.

On the page load you can show this popup

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - Javascript pop-up window focus issue - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)