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!