Often there’s a need to determine absolute coordinates of an HTML element within a page, for example you need to display a popup menu on a button click at the button coordinates. Code for this is well known, here is one of the variations:

// Define class that will hold Object coordinates
function CTopLeft(i_nTop, i_nLeft) {
   this.nTop = i_nTop;
   this.nLeft = i_nLeft;
}

// Get Top, Left coordinates of a DOM element
function GetTopLeft(i_oElem) {
   var cTL = new CTopLeft(0, 0);
   var oElem = i_oElem;
 
   do {
      cTL.nLeft += oElem.offsetLeft;
      cTL.nTop += oElem.offsetTop;
      oElem = oElem.offsetParent;
   } while (oElem)
   
   return cTL;
}

This code is pretty straightforward: we’re looping thru all element’s ancestors, adding up each parent’s offsetTop and offsetLeft to get actual element coordinates.

This works well when your page is at the top level. But what if the page is inside of an IFRAME? Then the code above would give you coordinates of an element within the IFRAME window only. But what if you still need absolute coordinates of the element within browser window? Taking the example above – you need to display popup menu on the button clicked inside of IFRAME, but the menu can grow big and go outside of IFRAME boundaries. So the menu element need to be hosted outside of the IFRAME and coordinates need to be absolute withing browser window.

Let’s throw IFRAMEs into the mix:

function GetTopLeftFromIframe(i_oElem) {
   var cTL = new CTopLeft(0, 0);
   var oElem = i_oElem;
   var oWindow = window;

   do {
      cTL.nLeft += oElem.offsetLeft;
      cTL.nTop += oElem.offsetTop;
      oElem = oElem.offsetParent;

      if (oElem == null) { // If we reach top of the ancestor hierarchy
         oElem = oWindow.frameElement; // Jump to IFRAME Element hosting the document
         oWindow = oWindow.parent;   // and switching current window to 1 level up
      }
   } while (oElem)
  
   return cTL;
}

This code follows the same route as the original one up to the point where there’s no offsetParent object anymore. Original code exits at this point; modified code attempts to jump to IFRAME element that host the page that host the ancestors that host our element (Jack eat your heart out). After that it’s back to original route – climb up ancestor tree collecting offsets.

The beauty of this code that it’s universal – it will work for page that doesn’t have any IFRAMEs at all; it will work if the element is within an IFRAME and that IFRAME is in turn inside of another IFRAME etc.