Search code examples
javascripthtmlfullscreentaskbar

How can I open a new popup window on Google Chrome that adjusts to any screen without going over Windows' taskbar?


I've been trying to create a popup launcher that fits the screen without overlapping Windows' taskbar, I've done some research, and even created the HTML file, but it doesn't quite work properly, it overlaps the taskbar and even goes beyond it. How can achieve such task, and what am I doing wrong?

Code: ( Run it on your desktop )

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>winds</title>
  </head>
  <body>

    <script>
      function fc()
      {
        window.open('http://www.google.com.br','window','menubar=yes,screenX=0,screenY=0,top=0,left=0,location=no,status=no,toolbar=no,scrollbars=yes,resizable=no,width=' + (screen.width - 10) + ',height=' + screen.availHeight);
      }
    </script>

    <a href="JavaScript:fc()">Chrome</a>

  </body>
</html>


Solution

  • It turns out window.outerWidth and window.outerHeight have been around a while but did not show up in IE until IE9.

    The following code example opens a window with maximum size but clear of task bars by first opening it with minimum size and then resizing the opened window to occupy all of the available area.

    function splashOpen(url)
    {
        var winFeatures = 'screenX=0,screenY=0,top=0,left=0,scrollbars,width=100,height=100';
        var winName = 'window';
        var win = window.open(url,winName, winFeatures); 
        var extraWidth = win.screen.availWidth - win.outerWidth;
        var extraHeight = win.screen.availHeight - win.outerHeight;
        win.resizeBy(extraWidth, extraHeight);
        return win;
    }
    
    // and test
    splashOpen("javascript:'hello folks and world'");
    

    Noting:

    • the MDN wiki example of a window features string appears to be incorrect: include the names of features required and omit those not required.

    • Users may have selectively disabled suppression of widow.open features. (In Mozilla Firefox see about:config under dom.disable_window_open_feature to prevent popups hiding location details or disabling other useful features.)