zhephree/framed.html

## framed.html
<html>
  <head></head>
  <body onload="iframeResizePipe()">
          <iframe id="helpframe" src='' height='0' width='0' frameborder='0'></iframe>

        <script type="text/javascript">
          function iframeResizePipe()
          {
             // What's the page height?
             var height = document.body.scrollHeight;

             // 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://domain-one.com/helper.html?height='+height+'&cacheb='+Math.random();

          }
        </script>
  </body>
</html>

## helper.html
<html>
  <body onload="parentIframeResize()">
    <script>
      // 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..
         //parent.parent.resizeIframe(height);
         removeCookie("frameheight");
         setCookie("frameheight",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];
      }
      function removeCookie(c_name){
        setCookie(c_name,"",-1);
      }
      function setCookie(c_name,value,exdays)
      {
        var exdate=new Date();
        exdate.setDate(exdate.getDate() + exdays);
        var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
        document.cookie=c_name + "=" + c_value;
      }
    </script>
  </body>
</html>

## host.html
<!--
This technique requires that you have control of both domains. The code isn't perfect and it's hardly semantic. This is to illustrate the concept.

The idea is that you have 3 pages: host, framed, and helper.

Host is the main page on your site. Host will be holding an IFRAME that contains framed, which is on a different domain.

Framed also contains an IFRAME, which is pointed to helper.html, which is on the same domain as host. Framed determines its height, and sets its hidden IFRAME's URL to helper.html?height=DETECTED_HEIGHT.

Helper pulls the height from its querystring and stores it in a cookie.

Meanwhile, Host checks the cookie (which it can since it and helper are on the same domain) every 100ms. If host determines that there is a new height, it resizes the IFRAME containing framed.html and scrolls itself to the top.

This method is adapted from an old method I found on Stackoverflow that no longer works in modern browsers.
-->

<html>
<head>
</head>
<body onload="setframe()">
<script>
function setframe(){
	removeCookie("frameheight");
	document.getElementById('frame_name_here').src="http://domain-two.com/framed.html?cacheb="+Math.random();
}

var prevHeight=0;
  // Resize iframe to full height
  function resizeIframe()
  {
    // "+60" is a general rule of thumb to allow for differences in
    // IE & and FF height reporting, can be adjusted as required..
    var height=getCookie("frameheight");
    if(prevHeight!=height){
    	document.getElementById('frame_name_here').height = parseInt(height)+60;
    	window.scrollTo(0,0);
 	}
    prevHeight=height;
  }

function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
  x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
  y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
  x=x.replace(/^\s+|\s+$/g,"");
  if (x==c_name)
    {
    return unescape(y);
    }
  }
}
      function removeCookie(c_name){
        setCookie(c_name,"",-1);
      }
      function setCookie(c_name,value,exdays)
      {
        var exdate=new Date();
        exdate.setDate(exdate.getDate() + exdays);
        var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
        document.cookie=c_name + "=" + c_value;
      }

window.setInterval(resizeIframe,100);
</script>
<iframe id='frame_name_here' src='' width="600"></iframe>
</body>
</html>
	<html>
	<head></head>
	<body onload="iframeResizePipe()">
	<iframe id="helpframe" src='' height='0' width='0' frameborder='0'></iframe>

	<script type="text/javascript">
	function iframeResizePipe()
	{
	// What's the page height?
	var height = document.body.scrollHeight;

	// 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://domain-one.com/helper.html?height='+height+'&cacheb='+Math.random();

	}
	</script>
	</body>
	</html>
	<html>
	<body onload="parentIframeResize()">
	<script>
	// 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..
	//parent.parent.resizeIframe(height);
	removeCookie("frameheight");
	setCookie("frameheight",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];
	}
	function removeCookie(c_name){
	setCookie(c_name,"",-1);
	}
	function setCookie(c_name,value,exdays)
	{
	var exdate=new Date();
	exdate.setDate(exdate.getDate() + exdays);
	var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
	document.cookie=c_name + "=" + c_value;
	}
	</script>
	</body>
	</html>
	<!--
	This technique requires that you have control of both domains. The code isn't perfect and it's hardly semantic. This is to illustrate the concept.

	The idea is that you have 3 pages: host, framed, and helper.

	Host is the main page on your site. Host will be holding an IFRAME that contains framed, which is on a different domain.

	Framed also contains an IFRAME, which is pointed to helper.html, which is on the same domain as host. Framed determines its height, and sets its hidden IFRAME's URL to helper.html?height=DETECTED_HEIGHT.

	Helper pulls the height from its querystring and stores it in a cookie.

	Meanwhile, Host checks the cookie (which it can since it and helper are on the same domain) every 100ms. If host determines that there is a new height, it resizes the IFRAME containing framed.html and scrolls itself to the top.

	This method is adapted from an old method I found on Stackoverflow that no longer works in modern browsers.
	-->

	<html>
	<head>
	</head>
	<body onload="setframe()">
	<script>
	function setframe(){
	removeCookie("frameheight");
	document.getElementById('frame_name_here').src="http://domain-two.com/framed.html?cacheb="+Math.random();
	}

	var prevHeight=0;
	// Resize iframe to full height
	function resizeIframe()
	{
	// "+60" is a general rule of thumb to allow for differences in
	// IE & and FF height reporting, can be adjusted as required..
	var height=getCookie("frameheight");
	if(prevHeight!=height){
	document.getElementById('frame_name_here').height = parseInt(height)+60;
	window.scrollTo(0,0);
	}
	prevHeight=height;
	}

	function getCookie(c_name)
	{
	var i,x,y,ARRcookies=document.cookie.split(";");
	for (i=0;i<ARRcookies.length;i++)
	{
	x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
	y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
	x=x.replace(/^\s+\|\s+$/g,"");
	if (x==c_name)
	{
	return unescape(y);
	}
	}
	}
	function removeCookie(c_name){
	setCookie(c_name,"",-1);
	}
	function setCookie(c_name,value,exdays)
	{
	var exdate=new Date();
	exdate.setDate(exdate.getDate() + exdays);
	var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
	document.cookie=c_name + "=" + c_value;
	}

	window.setInterval(resizeIframe,100);
	</script>
	<iframe id='frame_name_here' src='' width="600"></iframe>
	</body>
	</html>