JavaScript弹出窗口焦点问题

Question

我想创建一个“弹出窗口”，每次单击按钮时都会获得焦点。 下面的函数可以通过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');">

它将主表单中的模式设置为“删除”并提交表单。 登陆页面是表单所在的页面。 因此，它会进行一些php验证，并在body标签内使用onload方法执行PopupDelete函数。

<body onload='PopupDelete(delete_images)'>

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

任何建议将被广泛赞赏。

Answer 1

在没有用户交互的情况下打开弹出窗口和在没有用户交互的情况下聚焦弹出窗口都是由于浏览器安全性而引起的。 同样因为安全性是独立维护的，所以这是特定于浏览器的。

如果用户已经接受显示阻止的弹出窗口，则似乎可以在没有用户交互的情况下打开弹出窗口。 但是允许弹出窗口不允许在任何弹出窗口对象上调用focus方法。 如果您需要更多信息，此其他SO答案将涉及此内容。

您可以使用以下代码演示此问题。 加载页面不允许在Safari，Chrome或Firefox中都无法打开弹出式窗口（请注意，我在Mac上，因此Windows的浏览器结果可能有所不同）。 如果您允许阻止的弹出窗口，或者已经从以前访问该站点的情况下打开了弹出窗口，则将在所有3个浏览器中重新加载该窗口的URL。 只有Safari允许在没有用户交互（ onload ）的情况下将focus在这个已经弹出的窗口上，而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对象窗口，如果不先重新打开该变量就无法维护该变量以使其聚焦。 因此，此弹出窗口无论如何都无法保持其完整性。 我相信必须有更好的方法来完成此任务。

Answer 2

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

$(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