Automatically resize the IFRAME to adjust to the Form size

If you need to show an external page within CRM, you need to provide the URL to the IFRAME in CRM. You will notice that it would not display scrollbars to scroll through the entire web page being displayed in the IFRAME. So it is advised that we create a custom page and add an IFRAME within a "DIV" tag. This helps in bringing up the Scroll bars to allow users to navigate through the entire page.

But there is still a glitch. If you happen to resize the form on which the IFRAME has been added, you will find that the IFRAME does not automatically resize itself according to the form.

Here is the script that we used to achieve this.

Here we try to resize the two IFRAMES ('IFRAME_ActivityShow' and 'IFRAME_ReportShow') that were added on the CRM form.

Add the below function in the custom page on which the IFRAME has been originally placed


function calcHeightWidth()

{

var main_height = null;

var main_width = null;

var height = null;

var width = null;



// for all except Explorer

if (self.innerHeight) {

main_height = self.innerHeight;

main_width = self.innerWidth;

// Explorer 6 Strict Mode

} else if (document.documentElement

&& document.documentElement.clientHeight) {

main_width = document.documentElement.clientWidth;

main_height = document.documentElement.clientHeight;

// other Explorers

} else if (document.body) {

main_height = document.body.clientHeight;

main_width = document.body.clientWidth;

}



height = main_height * (3/4) + 'px';

width = main_width * (1/2) + 'px';



//change the height of the iframe

document.getElementById('IFRAME_ActivityShow').style.height=height;

document.getElementById('IFRAME_ActivityShow').style.width=width;

document.getElementById('IFRAME_ReportShow').style.height=height;

document.getElementById('IFRAME_ReportShow').style.width=width;

}


We need to attach this function to the IFRAME in the page load event of the custom page.

if (!Page.IsPostBack)
{
IFRAME_ActivityShow.Attributes.Add("onload","javascript:calcHeightWidth()");

}

Hope this helps others too!