Dynamically adjusting JQuery UI dialog box position in IFRAME depending on scrolling the main browser window

In a perfect world there would be no IFRAMEs and all intercommunication would rely on web services and similar technologies. But unfortunately there's still a need sometimes to integate an external page using an IFRAME. The problem I have encountered lately is about showing a simple dialog window within an IFRAME with window being centered relative to the main (parent) window, not an IFRAME. 

As IFRAME has no idea about scrolling the main window, just putting a value 'center won't do any good for us (unless the IFRAME is small enough and will fit the main window in all circumstances). In essence the task is to set coordinates of the dialog window inside an IFRAME adjusted on the scrolling position. This adjustment is formed of scroll position and additional fixed parameter, for example, half of main browser window height (so that the top left corner of the window is set right in the middle of the window. To have the window exactly in the middle we might also need to add half of the whole dialog window height, but that usually is not a problem (because this is fixed and known number). 

All actions are performed inside an IFRAME and we need to access the parent window to obtain the number of pixels scrolled in the main window and here's the catch: we cannot do it unless both main (parent) window and an IFRAME share the same host, protocol and port number. This limitation is set for a reason - to prevent potentially unsafe access by third-party's javascript code. 

To get the scroll position we need the following JQuery statement: 

$(window.parent.document).scrollTop()

and to get the height of the main parent window:

window.parent.window.innerHeight

It's also better to take into account older browsers that might not support innerHeight property, so there's a helper function that will return the height depending on the browser capabilities. 

    function GetHeight() {
        var Height;
        if (typeof window.parent.window.innerHeight != 'undefined') {
            Height = window.parent.window.innerHeight;
        }
        else if (typeof window.parent.document.documentElement != 'undefined'
 && typeof window.parent.document.documentElement.clientHeight !=
 'undefined' && window.parent.document.documentElement.clientHeight != 0) {
        Height = window.parent.document.documentElement.clientHeight;
        }
        else {
            Height = window.parent.document.getElementsByTagName('body')[0].clientHeight;
        }
        return Height;
    }

Finally this is how we use these pieces of data in defining the JQuery UI dialog box: 

    $(document).ready(function () {
        $(".link").click(function () {           
            $("#dialog-confirm").dialog({
                resizable: false,
                height: 200,
                width: 730,
                modal: true,
                position: [200, $(window.parent.document).scrollTop() + GetHeight() / 2]
}); }); });

200 - is just an arbitrary number, the X coordinate that usually is easy to determine. It's either the half of client window width or something else. Anyway, it's usually vertical scrolling that presents a problem; horizontal scrolling is a no-no anyway and should be eliminated. 

As for the link it might be something like: 

<a href="#" class="link" id="mylink" style="position:relative; top:2800px; margin-left:200px;">test</a>