How To Set Iframe Container Height From Remote Domain using easyXDM

Rob — May 25, 2012 - 11:19

One of my recent projects required the use of iframes. We had to place the content of service provider in an iframe on our website. The problem was however that the height of the iframe content would dynamically change depending on user interaction (like choosing a different product or rate plan). So since the iframe content was from a different domain from where it was being displayed, I needed to use the wonderful easyXDM library.

EasyXDM is a great library, but I found the documentation a bit lacking and the demos to complicated - so I decided to write this article to help anyone else who needs it. So you will find below a manual way of calling the Socket function. To get this working you will need to point your jQuery and easyXDM script sources to proper paths.

The Provider

Create an HTML file on the root folder of a remote domain and name it "exdm-provider.html", it should have the following code:

<html>
<head>
<script type="text/javascript" src="/js/easyXDM.js"></script>
</head>
<body style="background-color:#E7E7E7;padding:10px;">
	<h2>Provider (iframe source)</h2>		
	<div id="contentBox" style="height:200px;background-color:#CCC;">
		<p>this is some copy inside a child div</p>
	</div>
	
	<!-- next few lines support button for height increases -->
	<script type="text/javascript" src="/js/jquery.js"></script>
	<script type="text/javascript">var increaseMyHeight = function() { jQuery('#contentBox').height(jQuery('#contentBox').height() + 200); };</script>
	<button onclick="javascript:increaseMyHeight();">increase height</button>
	
	<script type="text/javascript">
		var socket = new easyXDM.Socket({
			onReady:  function() {
				// this is needed for setting height on initial load
				socket.postMessage(document.body.scrollHeight)
			},
			onMessage: function(message, origin){
				// this is called from consumer (maybe by a timer)
				socket.postMessage(document.body.scrollHeight)
			}
		});
	</script>
</body>
</html>

The Consumer

Create an HTML file on the root folder of a local domain and name it "exdm-provider.html", it should have the following code:

<html>
<head>
<script type="text/javascript" src="/js/easyXDM.js"></script>
</head>
<body>
	<h2>Consumer (iframe container)</h2>
	
	<div id="iframeContainer" style="background-color:#FC0;">
		<!-- do not define an iframe, it will get generated for you in this container -->
	</div>

	<script type="text/javascript">
		var socketSetup = {
			remote: "http://www.remotedomain.com/exdm-provider2.html",
			container: document.getElementById("iframeContainer"),
			onMessage: function(message, origin){
				this.container.getElementsByTagName("iframe")[0].style.height = message + "px";
				this.container.getElementsByTagName("iframe")[0].style.width = "500px";
			}
		};
		var mySocket = new easyXDM.Socket(socketSetup);
		
		var runSocketMessenger = function() { mySocket.postMessage(); }
		
	</script>
	
	<button onclick="javascript:runSocketMessenger();">Run Socket Messenger</button>	
	

</body>
</html>

After you get all your files on the servers, open your browser and point it to the URL of the Consumer file. When the file loads, the iframe will be injected into the container and the container will be resized. Of course, this is not automatic because you have to click the Run Socket Messenger

Rob's blog
Login to post comments