To set iFrame height dynamically, use the following code.
For ex:- I need to use Content.aspx page into Main.html page
Code for Content.aspx
<html>
<head id="Head1" runat="server">
<title>Content.aspx</title>
</head>
<body onload="iframeResizePipe();" >
<!-- Start of 'iframe auto height' -->
//Jquery file include
<script type="text/javascript" src="Scripts/jquery-1.6.2.js"></script>
<script type="text/javascript">
function iframeResizePipe() {
// var height = document.body.parentNode.scrollHeight;
// if (navigator.appName.toString() == "Netscape") {
// height = document.body.parentNode.offsetHeight;
// }
// else
// height = document.body.parentNode.scrollHeight;
var height = $(document.body).height();
// Going to 'pipe' the data to the parent through the helpframe.
var pipe = document.getElementById('helpframe');
// Cachebuster a precaution here to stop browser caching interfering
pipe.src = 'http://main_html_domain_URL/iframehelper.html?height=' + height + '&cacheb=' + Math.random();
}
</script>
<iframe id="helpframe" src="" height="0" width="0" frameborder="0"></iframe>
<!-- End of 'iframe auto height' -->
---Your page content---
</body>
</html>
Code for main.html
<html>
<head id="Head1" runat="server">
<title>Content.aspx</title>
<script type="text/javascript">
function resizeIframe(height) {
// "+60" is a general rule of thumb to allow for differences in
// IE & and FF height reporting, can be adjusted as required
document.getElementById('frame_name').height = parseInt(height) + "px";
document.getElementById('frame_name').width = '100%';
}
</script>
</head>
<body >
<iframe name="frame-name" id="frame-name" width="1" height="1" scrolling="no"
frameborder="0" src="http://Content_Aspx_page_URL/Content.aspx">
</iframe>
</body>
</html>
iFrameHelper.html page code
Create HTML page with name “iFrameHelper.html” in the location “'http://main_html_domain_URL” and inside this html page paste the following code
<html>
<head>
<script type="text/javascript">
// Tell the parent iframe what height the iframe needs to be
function parentIframeResize() {
var height = getParam('height');
// This works as our parent's parent is on our domain
if (typeof (parent.parent.resizeIframe) == "function")
parent.parent.resizeIframe(height);
}
// Helper function, parse param from request string
function getParam(name) {
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regexS = "[\\?&]" + name + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(window.location.href);
if (results == null) return "";
else return results[1];
}
</script>
<body onload="parentIframeResize()">
</body>
</html>
No comments:
Post a Comment