My attempt at resizing a cross-site iframe is not working as expected, despite following the guidance provided here. The iframe on my page seems to remain unaltered in size, and I can't figure out what mistake I might be making.
The current location of the iframe is set to . This particular page calls a blog post that subsequently loads a 'helper.html' page on the main ayeoui.com domain. The intention behind this setup is to relay information back to the initial page and trigger a resize event. The code snippet present on the main site looks like this:
<script>
// Function to adjust iframe height dynamically
function resizeIframe(height)
{
// Adding "+60" is a standard practice to cater for variations in height reporting between different browsers such as IE and FF; you may need to tweak it accordingly.
document.getElementById('iframeid').height = parseInt(height)+60;
}
</script>
<iframe id='iframeid' src='http://rinich.com/blog/11/index.html'></iframe>
Similarly, the linked page contains the following code snippet:
<body onload="iframeResizePipe()">
<iframe id="helpframe" src='' height='0' width='0' frameborder='0'></iframe>
<script type="text/javascript">
function iframeResizePipe()
{
var height = document.body.scrollHeight;
var pipe = document.getElementById('helpframe');
pipe.src = 'http://www.ayeoui.com/helper.html?height='+height+'&cacheb='+Math.random();
}
</script>
Finally, let's take a look at the helper page:
<html>
<!--
This page resides on the same domain as the parent page, enabling communication to facilitate resizing of the iframe window based on content.
-->
<body onload="parentIframeResize()">
<script>
// Informing the parent page about the required iframe height
function parentIframeResize()
{
var height = getParam('height');
parent.parent.resizeIframe(height);
}
// Utility function to extract parameter from URL
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>
</html>
Even with all these steps in place, the tester page shows no sign of change! It's evident that an error exists somewhere in the process, but pinpointing it is proving to be challenging. Can anyone shed light on what might be going wrong?