A Centered Fluid Iframe

Styles can be used to size and center the iframe horizontally using percentage width and margin auto, adding text-align center on the body for old versions of Internet Explorer if you like.

JavaScript is used to size and position the iframe vertically. Resize your browser window to see the iframe resized and repositioned accordingly.

function setIframeHeight(id, h) {
    var ifrm = document.getElementById(id);
    if (ifrm) {
        var winHt = dw_getWindowDims().height;
        ifrm.style.height = Math.round( h * winHt ) + "px";
        ifrm.style.marginTop = Math.round( ( winHt - parseInt(ifrm.style.height) )/2 ) + "px";
    }
}

window.onload = function() { setIframeHeight('ifrm', .8); }
window.onresize = function() { setIframeHeight('ifrm', .8); }

Since the code is only interacting with the iframe element and not with the document inside the iframe, there is no cross-domain security restriction on this code, so you could load an external file, assuming that page does not contain code which will violate those restrictions.

You can use your browser's menu commands to view the source code of the current document. You can right-click on an iframe to access the source code of the document contained inside it. This tutorial's examples are available for download in a zipped file.