javascript - Edge 浏览器中的 focus()

Question

我正在使用 popup.focus() 在单击按钮后聚焦弹出窗口。 focus() 适用于所有浏览器，但 ****EDGE**** 浏览器除外。我面临的问题是间歇性的。有时我能够在浏览器上查看弹出窗口(子弹出对话框)，有时在浏览器后面，即在桌面上，我能够通过任务栏上的闪烁确定弹出窗口已打开。

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

var popup = new PopupWind(url,'config')
popup.setFeature('height', height)
popup.setFeature('resizable', 'no')
popup.setFeature('scrollbars', 'no')
popup.setFeature('left', xLoc) // IE
popup.setFeature('top', yLoc)
popup.setFeature('screenx', xLoc) // NS
popup.setFeature('screeny', yLoc)  
popup.open()
popup.focus();

我尝试使用它来使 focus() 在 EDGE 中工作，但它没有

popup.blur();
setTimeout( popup.focus,0); 

Answer 1

我有一个解决方案/Hack

请在您的 Edge 浏览器中打开解决方案的链接 https://codepen.io/PocketNinjaDesign/pen/OgbQXO

窗口没有间歇性聚焦!

问题是您需要弄乱页面的焦点。如果您打开一个弹出窗口，然后将焦点放在父页面上，那么即使只移动父页面 1 个像素。单击该按钮将再次聚焦于弹出窗口。

因此，对于窗口方法似乎不起作用的瘫痪网络浏览器，除了等待几年让他们修复其 focus() 错误之外，您还能做什么。

好吧，hack 是通过生成一个临时的空弹出窗口来从父窗口中移除焦点。然后专注于主弹出窗口并关闭临时弹出窗口。全部由 setTimeout @ 300ms 包裹，再低一点，它似乎对我不起作用。

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="button" class="bttn">Open Popup</div>
<div id="focus" class="bttn focus">Focus on Popup</div>

JavaScript

// This is the main guts of this page!
var isMSEdge = function() {
  return window.navigator.userAgent.toLowerCase().indexOf('edge') > -1;
};

$(function() {
  var $bttn = $('#button');
  var $focusBttn = $('#focus');
  var tempWin;
  var testWindow;

  $bttn.on('click', function() {
    testWindow = window.open('', "pocketninja", "width=300, height=300");
    $focusBttn.show();
    $(this).hide();
  });

  $focusBttn.on('click', function() {
    if(testWindow && isMSEdge()) {
        tempWin = window.open('', 'temp', 'width=1, height=1');

        setTimeout(function() {
          testWindow.focus();
          tempWin.close();
        }, 300);   
    }
    else {
      testWindow.focus();
    }
  });
});