JavaScript弹出窗口焦点问题 [英] Javascript pop-up window focus issue
问题描述
我想创建一个弹出窗口，每次单击按钮时都会获得焦点。下面的函数在 onclick 事件中执行正常，但是当父页面从onload事件刷新并执行时，不会按预期执行。
这是我的函数：
函数PopupDelete（delete_images）
{
var win = window.open（'URL'，'PopupDelete'，'width = 500，height = 400，scrollbars = yes'）;
win.focus（）;
$ b 所以如果我在下面的按钮中使用它， p>
< input type =buttonname =deletevalue =Imagesclass =smallbuttononclick =PopupDelete delete_images）;>
现在我遇到的问题是我们在按钮上使用另一种名为set_mode的方法，而不是直接调用 PopupDelete 函数。
函数set_mode（mode）
{
document.MASTER.mode.value = mode;
document.MASTER.submit（）;
}
< input type =buttonname =deletevalue =Imagesclass =smallbuttononclick =set_mode（'delete'）;>
它将主窗体中的模式设置为删除并提交表单。登录页面与表单所在的页面相同。因此，它执行了一些php验证，并在body标签内使用 onload 方法执行 PopupDelete 函数。
< body onload ='PopupDelete（delete_images）'>
如果没有弹出窗口打开它可以正常工作，但如果弹出窗口已经打开并且最小化，那么弹出窗口不会获得焦点。有趣的是，它确实识别并更新了弹出窗口中呈现的内容，但不能识别.focus（）。
任何建议都将被广泛赞赏。 / p>
解决方案无需用户交互即可打开一个弹出窗口，并且无需用户交互即可集中弹出窗口，这是由于浏览器安全性问题。同样因为安全性是独立维护的，所以这是浏览器特定的。
如果用户已经接受显示被阻止的弹出窗口，您可以在没有用户交互的情况下打开一个弹出窗口。但允许弹出窗口不允许在任何弹出窗口对象上调用 focus 方法。如果您想了解更多信息，请这个其他答案涉及这个。
您可以使用以下代码演示此问题。加载页面不允许在Safari，Chrome或Firefox中打开弹出窗口（请记住，我在Mac上，因此对于Windows，浏览器结果可能会有所不同）。如果您允许阻止的弹出窗口，或者已经从之前访问该站点打开了弹出窗口，则该窗口将在所有3个浏览器中重新加载该URL。只有Safari允许在没有用户交互的情况下调用焦点这个已经弹出的窗口（ onload ），Chrome和Firefox不会。但正如你所看到的那样，点击焦点按钮仍然会将弹出窗口聚焦在所有3个浏览器上，表明它是可能的，但浏览器正在阻止它。所以从我可以告诉这只是在Safari中可能（再次牢记我没有试过IE）。但是，无论哪种方式，我都不相信强迫用户使用特定的浏览器正确查看您的网站是件好事。
var w;
函数PopupDelete（delete_images）{
w = window.open（'/ testing / t /'，'PopupDelete'，'width = 500，height = 400，scrollbars = yes'）;
console.log（w）;
w.focus（）;
$ b $（b
$ b $（'＃open'）。click（PopupDelete）; $ b（function（）{
PopupDelete（）;
$ b $ $ b $（'＃focus'）。click（function（）{
console.log（'f'，w）;
w.focus（）;
}）;
}）; b
$ b
请记住，即使您可以这样做，当您重新加载父母时，它仍然是重新打开弹出窗口并替换以前的窗口（并且这必须完成，因为据我所知，您无法获得以前打开的窗口的窗口对象，所以没有办法保持该变量不会重新打开而将其聚焦）。所以这个弹出窗口无论如何不会保持它的完整性。我相信必须有更好的方法来完成这项任务。
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.
解决方案 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();
});
});
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 completing this task.
这篇关于JavaScript弹出窗口焦点问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
