Auto Size Iframe

Discussion in 'HTML & Website Design' started by Jamison777, Feb 19, 2011.

0
  1. #1
    I am trying to pull in my VBulletin forum into an Iframe on one of my other sites. I want the Iframe to auto resize so that there is no scrolling necessary. I have tried a number of techniques and none seem to work. I am willing to pay someone to help me figure this out.

    The solution must be cross-browser compatible.

    Any help?
     
    Jamison777, Feb 19, 2011 IP
  2. hdewantara

    hdewantara Well-Known Member

    Messages:
    540
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #2
    Hi,
    Resizing might be done with javascript/CSS. But I guess to know the actual width of <body> element of your forum which resides on other site/ domain is prohibited, due to security reason.

    So for cross-domain, perhaps window.postMessage(), see http://www.w3.org/TR/2010/WD-webmessaging-20101118/#introduction will do the trick...

    Hendra
     
    hdewantara, Feb 20, 2011 IP
  3. AtSeaDesign

    AtSeaDesign Active Member

    Messages:
    172
    Likes Received:
    2
    Best Answers:
    1
    Trophy Points:
    93
    #3
    AtSeaDesign, Feb 20, 2011 IP
  4. WbDev

    WbDev Peon

    Messages:
    16
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    i didn't found nothing there :(
     
    WbDev, Feb 20, 2011 IP
  5. jawanda

    jawanda Peon

    Messages:
    151
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #5
    What about using a normal frame set instead of an iframe? Might accomplish what you are looking for more easily ...
     
    jawanda, Feb 20, 2011 IP
  6. hdewantara

    hdewantara Well-Known Member

    Messages:
    540
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #6
    Wow, thanks.
    I haven't examined each posts thoroughly, but it seems that a resolution hasn't been found yet. Problems in cross-domain, and refreshing still exist?

    Unfortunately I have no experience in customizing forum CMS, nor vBulletin :eek:,
    but I made a small my_vbull2.html on my server for simulating this problem.

    Now my_vbull2.html is called and put into iframe by my_iframe2.html (attached), which markup is as follows:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>my_iframe</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />

<style type="text/css">
	body{
		width: 640px;
		height: 480px;
		background-color: #88e;
		border: 2px solid #447;
	}
	iframe{
		overflow: auto;
		width: 550px;
	}
</style>

<script type="text/javascript">
var
  timer = null;
	
window.addEventListener('message', 
	function(ev){
		var
			msg = ev.data.split('&');
		if (msg[0] == 'pass1234'){
			if (msg[1] == 'ready'){
				timer = setInterval(
					function(){
						document.getElementsByTagName('iframe')[0].contentWindow.postMessage('pass1234&height', '*');
					}
				,1000);
			}
			else{
				//alert(msg[1]);
				document.getElementsByTagName('iframe')[0].style.height = msg[1];
			}
		}
	}
,false);
					
</script>
</head>

<body>
	<p>A paragraph within the body of my_iframe.</p>
  <iframe src="http://www.smokingscript.com/test/postmessage/my_vbull2.html"></iframe>
</body>

</html>
    HTML:
    Try run this my_iframe2.html page on your local PC,
    and let me know.... don't use IE yet:)
     

    Attached Files:

    hdewantara, Feb 21, 2011 IP
  7. jkl6

    jkl6 Peon

    Messages:
    70
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Since this is cross domain, the parent page can not execute javascript code against the child page (the page inside the iframe), which means you won't be able to get the dimensions of the child page. However, the child page can execute code against the parent page using something like
    if(document.parent exists)
    document.parent.iframe_id.width = ...
    Add the code to the vbulletin site and it should be able to resize a parent page's iframe.
     
    jkl6, Feb 21, 2011 IP
  8. Jamison777

    Jamison777 Peon

    Messages:
    103
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Thanks for the replies! I have been tied up with some things. Anyone willing to help me implement a solution? As I said, I am willing to
    pay for some help.
     
    Jamison777, Feb 28, 2011 IP
  9. Jamison777

    Jamison777 Peon

    Messages:
    103
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Doesn't seem to work. Thanks for trying! :)
     
    Jamison777, Feb 28, 2011 IP
  10. Jamison777

    Jamison777 Peon

    Messages:
    103
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Supposedly, this code works:


    // 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.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.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>

    It can be found here:

    http://geekswithblogs.net/rashid/archive/2007/01/13/103518.aspx

    However, it isn't explained very well.
     
    Jamison777, Feb 28, 2011 IP
  11. hdewantara

    hdewantara Well-Known Member

    Messages:
    540
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #11
    Hmm strange, I didn't get any updates to this thread in my emailbox.

    Anyway,
    I have just read the article in http://geekswithblogs.net/rashid/arc...13/103518.aspx.

    It seems that the author try to pass iframe's window info to parent window through "window.top.location.hash" variable, and using this info the parent would adjust its iframe object layout.

    Well, it might be possible in the past. Modern browsers apply stricter rules by just allowing "window.top.location" or "window.top.location.href" to be set.

    My FF 3.6.13 did indicate "hash setting" by giving an error which looks like:
    and also this:
    So... What error/ warnings did you get running my my_iframe2.html ?

    Hendra
     
    hdewantara, Mar 1, 2011 IP