Scripts below seem to work cross domain to dynamically resize iframe height as long as you have the ability to add frames.js to the target iframe. Maybe a variation of this script can be tweaked and incorporated into the DNN iframe module. Made a few changes to get it to work: Works well so far for IE, Netscape. buggy with firefox and a no go with opera. Still needs some refining but the method of using hash / fragement indentifiers seems to work and get around the cross domain security issues.
registerFrame : function(frame)
{
if (window.location.hash.length == 1 ) return;
// Added line above to get links in iframe to not reload frame.src
var currentLocation = location.href;
var hashIndex = currentLocation.indexOf('#');
if (hashIndex > -1)
{
currentLocation = currentLocation.substring(0, hashIndex);
}
frame.contentWindow.location = frame.src + '#' + currentLocation + '?frameId=' + frame.id;
// Modified and moved ?frameid after the hash (not fully tested)
}
};
Originally Posted at: http://geekswithblogs.net/rashid/archive/2007/01/13/103518.aspx
Recently I was trying to set an iframe height which is hosted in another domain. But could not able to get its height from its hosting window - It always throws security exception. I searched Google and found a interesting example on Iframe cross domain messaging, here is the link. Based upon it I have created a small solution which finally does the job. Here are files, you can also download these files from this link:
// FrameManager.js -- Must be added in Hosting window
var FrameManager =
{
currentFrameId : '',
currentFrameHeight : 0,
lastFrameId : '',
lastFrameHeight : 0,
resizeTimerId : null,
init : function()
{
if (FrameManager.resizeTimerId == null)
{
FrameManager.resizeTimerId = window.setInterval(FrameManager.resizeFrames, 500);
}
},
resizeFrames : function()
{
FrameManager.retrieveFrameIdAndHeight();
if ((FrameManager.currentFrameId != FrameManager.lastFrameId) ||
(FrameManager.currentFrameHeight != FrameManager.lastFrameHeight))
{
var iframe = document.getElementById(FrameManager.currentFrameId.toString());
if (iframe == null) return;
iframe.style.height = FrameManager.currentFrameHeight.toString() + "px";
FrameManager.lastFrameId = FrameManager.currentFrameId;
FrameManager.lastFrameHeight = FrameManager.currentFrameHeight;
window.location.hash = '';
}
},
retrieveFrameIdAndHeight : function()
{
if (window.location.hash.length == 0) return;
var hashValue = window.location.hash.substring(1);
if ((hashValue == null) || (hashValue.length == 0)) return;
var pairs = hashValue.split('&');
if ((pairs != null) && (pairs.length > 0))
{
for(var i = 0; i < pairs.length; i++)
{
var pair = pairs[i].split('=');
if ((pair != null) && (pair.length > 0))
{
if (pair[0] == 'frameId')
{
if ((pair[1] != null) && (pair[1].length > 0))
{
FrameManager.currentFrameId = pair[1];
}
}
else if (pair[0] == 'height')
{
var height = parseInt(pair[1]);
if (!isNaN(height))
{
FrameManager.currentFrameHeight = height;
FrameManager.currentFrameHeight += 15;
}
}
}
}
}
},
registerFrame : function(frame)
{
var currentLocation = location.href;
var hashIndex = currentLocation.indexOf('#');
if (hashIndex > -1)
{
currentLocation = currentLocation.substring(0, hashIndex);
}
frame.contentWindow.location = frame.src + '?frameId=' + frame.id + '#' + currentLocation;
}
};
window.setTimeout(FrameManager.init, 300);
<!--Host.html-Where the Target iframe resides-->
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>IFrame Resize Sample</title>
<script type="text/javascript" src="FrameManager.js"></script>
</head>
<body>
<div>The Following is an iframe:</div>
<iframe id="ifrSample1" scrolling="no" frameborder="0" src="Frame.html" style="margin:0px;width:330px;height:100px" onload="FrameManager.registerFrame(this)"></iframe>
</body>
</html>
// Frame.js -- Must be added in iframe window
function publishHeight()
{
if (window.location.hash.length == 0) return;
var frameId = getFrameId();
if (frameId == '') return;
var actualHeight = getBodyHeight();
var currentHeight = getViewPortHeight();
if (Math.abs(actualHeight - currentHeight) > 15)
{
var hostUrl = window.location.hash.substring(1);
hostUrl += "#";
hostUrl += 'frameId=' + frameId;
hostUrl += '&';
hostUrl += 'height=' + actualHeight.toString();
window.top.location = hostUrl;
}
}
function getFrameId()
{
var qs = parseQueryString(window.location.href);
var frameId = qs["frameId"];
var hashIndex = frameId.indexOf('#');
if (hashIndex > -1)
{
frameId = frameId.substring(0, hashIndex);
}
return frameId;
}
function getBodyHeight()
{
var height;
var scrollHeight;
var offsetHeight;
if (document.height)
{
height = document.height;
}
else if (document.body)
{
if (document.body.scrollHeight)
{
height = scrollHeight = document.body.scrollHeight;
}
if (document.body.offsetHeight)
{
height = offsetHeight = document.body.offsetHeight;
}
if (scrollHeight && offsetHeight)
{
height = Math.max(scrollHeight, offsetHeight);
}
}
return height;
}
function getViewPortHeight()
{
var height = 0;
if (window.innerHeight)
{
height = window.innerHeight - 18;
}
else if ((document.documentElement) && (document.documentElement.clientHeight))
{
height = document.documentElement.clientHeight;
}
else if ((document.body) && (document.body.clientHeight))
{
height = document.body.clientHeight;
}
return height;
}
function parseQueryString(url)
{
url = new String(url);
var queryStringValues = new Object();
var querystring = url.substring((url.indexOf('?') + 1), url.length);
var querystringSplit = querystring.split('&');
for (i = 0; i < querystringSplit.length; i++)
{
var pair = querystringSplit[i].split('=');
var name = pair[0];
var value = pair[1];
queryStringValues[name] = value;
}
return queryStringValues;
}
<!--Frame.html-Will reside in another domain-->
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Page In IFrame</title>
<script type="text/javascript" src="Frame.js"></script>
<script type="text/javascript">
window.onload = function(event)
{
window.setInterval(publishHeight, 300);
}
</script>
</head>
<body>
<div>
<div style="padding:4px;border:solid 1px #cccccc;width:300px">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce in tortor sit amet sem luctus ornare. Nam sed augue id erat commodo gravida. Nulla in pede. Nunc sed elit non pede aliquam eleifend. Cras varius. Sed non lorem eget ipsum accumsan suscipit. Donec bibendum enim. Phasellus a ligula. Fusce turpis diam, ultricies at, ullamcorper a, consectetuer et, mauris. Pellentesque neque felis, scelerisque non, vestibulum at, luctus quis, velit. Quisque sit amet mi sed sem facilisis ornare. In leo ante, hendrerit nec, lobortis eget, feugiat ac, orci.
</div>
<div style="padding:4px;border:solid 1px #cccccc;width:300px">
Maecenas ullamcorper ornare urna. Sed ornare leo vel lorem pretium ornare. Sed vitae lacus eu pede molestie venenatis. Morbi vestibulum. Proin tincidunt, sem sit amet semper volutpat, nulla ante pulvinar turpis, ut porta turpis augue sit amet magna. Nam in mauris. In mauris. Nunc metus. Duis eget diam. Sed vulputate lacus eget ipsum. Etiam ultricies bibendum ligula. Mauris semper, magna nec posuere pretium, quam lectus ultricies magna, ac pharetra risus ligula at dui. Integer volutpat sagittis ipsum.
</div>
<div style="padding:4px;border:solid 1px #cccccc;width:300px">
Cras pretium. Morbi condimentum. Morbi leo dui, hendrerit non, rhoncus vitae, ultrices sed, quam. Praesent sit amet quam non turpis pellentesque egestas. Aliquam odio lacus, condimentum eu, tempus eget, porta ac, ipsum. Phasellus sit amet mauris at nisl lobortis aliquet. Suspendisse fringilla metus porta lacus. Nam aliquet. Sed vestibulum tellus ac leo. Nunc sed metus vel nisl ultricies fermentum. Maecenas aliquam ligula quis est venenatis mattis. Suspendisse sollicitudin aliquet leo. Quisque condimentum felis ac nisl. Curabitur bibendum, pede et venenatis ornare, massa justo ullamcorper velit, a rutrum tellus mi et ligula. Maecenas nibh libero, faucibus vel, lacinia ac, laoreet nec, odio. Quisque dui quam, vestibulum sit amet, convallis eget, fermentum nec, mauris. Vivamus et massa ut orci pellentesque consectetuer. Proin dolor arcu, ornare non, iaculis eu, aliquam sed, quam. Morbi volutpat semper ipsum.
</div>
<div style="padding:4px;border:solid 1px #cccccc;width:300px">
Suspendisse potenti. Praesent eu turpis. Nullam nulla sem, sollicitudin lacinia, laoreet rhoncus, commodo nec, nisl. Nam pharetra porta justo. Etiam faucibus, turpis eu dapibus varius, felis nibh tempus justo, sed faucibus metus dolor nec leo. Sed rutrum, sapien eget placerat accumsan, enim quam porttitor leo, ac aliquam felis elit non enim. Sed dapibus nonummy massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean sagittis, metus et hendrerit aliquam, ligula turpis nonummy diam, id interdum risus ligula et magna. Phasellus vel nibh in lorem pretium iaculis.
</div>
<div style="padding:4px;border:solid 1px #cccccc;width:300px">
Proin mattis pharetra libero. Morbi varius, nunc laoreet blandit porttitor, pede augue condimentum felis, ac varius libero nibh eu est. Mauris condimentum arcu eget dolor. Phasellus vitae ipsum vel tellus feugiat lacinia. Quisque leo diam, porta id, commodo quis, ornare vitae, massa. In cursus dictum ante. In hac habitasse platea dictumst. Donec volutpat sem nec mauris. Donec venenatis lorem eget quam. Curabitur vitae ipsum sit amet augue dignissim ultricies. Maecenas eget velit. Donec nec tellus at lectus rhoncus ultricies.
</div>
</div>
</body>
</html>