JavaScript Issue with Maximizing the Window – onLoad comes too soon, use setTimeOut for delayed execution

Today a small matter that took quite a lot of time. In my ADF Faces application, a command button brings up a dialog window (browser pop up window). My assignment was to ensure that this window would always open in a maximized state, as to optimally benefit from the user’s screen. It seemed like a simple thing, couple of minutes or so. One snatch: we do not code or even see an openWindow statement, as you would normally do with JavaScript code opening pop up windows – the pop up code itself is part of ADF Faces. While ADF Faces allows we me specify – server side – the intended window width and height, it is not good enough: the width and height depend on the monitor used by the end user. So I resorted to JavaScript, to be executed immediately after loading the pop up window. Still seemed simple enough. Not.

After a tiny bit of Googling, I found the code for maximizing the window (and positioning it in the upper left hand corner. Note the use of top here, as ADF Faces quite liberally makes use of FRAMEs and what I initially took for the only document in the pop up, turned out to be just a child FRAME in a child FRAMESET.

function MaximizeWindow()
{
  top.window.moveTo(0,0);
  top.window.resizeTo(screen.width,screen.height)
  if (document.all) {
    top.window.resizeTo(screen.availWidth,screen.availHeight);
  }
  else if (document.layers||document.getElementById) {
    if (top.window.outerHeight < top.screen.availHeight||top.window.outerWidth<top.screen.availWidth){
      top.window.outerHeight = top.screen.availHeight;
      top.window.outerWidth = top.screen.availWidth;
    }
  }
} 

Now however there was the small matter of determining when and how to execute this code.

A logical option seems to be the onLoad event trigger, defined on the BODY element. However: that failed! Apparently the onLoad was executed too early – perhaps because of the frame nesting. Whatever the case, calling the MaximizeWindow() function from the onLoad did nothing on IE and caused a very temporarily maximize on Firefox, almost immediately undone.

After a bit of struggling with onFocus, onMouseOver or onMouseMove I had a lucky insight, that proved to help me out: using a Time Out to ask the browser to call the function MaximizeWindow() at a more convenient time did the trick:

function setMaximizeTimeOut() {
  window.setTimeout('MaximizeWindow()',0); // 0 want het gaat er alleen maar om de aanroep te doen als het window er klaar voor is
}
 

Note that the actual time out is 0 ms! So the call is instantaneous. However, where the onLoad fires at a time when an attempt to maximize the window fails, the scheduled time out with a delay of 0 ms apparently is only activated at a time where window manipulation can be done again. It surprises me a lot. However, it seems like a trick worth memorizing, as similar situation may arise.

This function now can be called from the onLoad trigger on the body element:

<afh:body id="body" onload="setMaximizeTimeOut()" >