gpt4 book ai didi

Javascript弹窗焦点问题

转载 作者:太空宇宙 更新时间:2023-11-04 16:26:49 25 4
gpt4 key购买 nike

我想创建一个“弹出窗口”,每次单击按钮时都会获得焦点。下面的函数在 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()。

我们将不胜感激任何建议。

最佳答案

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

如果用户已经接受显示被阻止的弹出窗口,您似乎可以在没有用户交互的情况下打开弹出窗口。但是允许弹出窗口不允许在任何弹出窗口对象上调用 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 对象,如果不先重新打开它,就无法维护该变量以使其聚焦)。所以这个弹出窗口无论如何都不会保持它的完整性。我相信一定有更好的方法来完成这项任务。

关于Javascript弹窗焦点问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24830249/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com