6

I am using popup.focus() to focus a popup window after a button is clicked. The focus() is working fine for all the browsers except for ****EDGE**** browser. The issue I am facing is intermittent. At times I am able to view the popup window (child popup dialog box) on the browser and at times behind the browser i.e. on the desktop and I am able to identify that the popup is open by the flashing on the task bar.

Any suggestion would be really appreciated. 

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

I tried using this to make focus() work in EDGE but it did not   

popup.blur();
setTimeout( popup.focus,0);
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Ravi
  • 61
  • 1
  • 3

1 Answers1

0

I have a solution/Hack

Please open link with the solution in your Edge browser https://codepen.io/PocketNinjaDesign/pen/OgbQXO

The window wasn't focusing intermittently!

The issue is that you need to mess with the focus of the page. if you open a popup and then focus on the parent page, then move the parent page even just 1 pixel. Clicking the button will focus on the popup again.

So for a crippled web browser where window methods don't seem to work what can you do other than wait for a few years for them to fix their focus() bug.

Well, the hack is to remove the focus from the parent window by generating a temp empty popup window. Then focusing on the main popup and closing the temp popup. All wrapped by a setTimeout @ 300ms, any lower and it didn't seem to work for me.

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();
    }
  });
});
Pocketninja
  • 395
  • 1
  • 12