How to make iFrame resize based on dynamic content each time the content height changes?
Is there any way of making the iframe change its height after the content inside changes?
Example: http://thc-racing.ucoz.com/index/forum/0-14
I’m using easyXDM
Page code:
<script type="text/javascript" src="http://thc-racing.ucoz.com/design/forum-external/xdm/easyXDM.js"></script> <div id="page-body"> <!-- do not define an iframe, it will get generated for you in this container --> </div> <script type="text/javascript"> new easyXDM.Socket({ remote: "http://thc-racing.forumotion.co.uk/", container: document.getElementById("page-body"), onMessage: function(message, origin){ this.container.getElementsByTagName("iframe")[0].style.height = message + "px"; this.container.getElementsByTagName("iframe")[0].style.width = "900px"; } }); </script>iFramed page:
<script type="text/javascript" src="http://thc-racing.ucoz.com/design/forum-external/xdm/easyXDM.js"></script> <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>Thanks.
I propose another way to achieve it and hope it helpful. It is easy to implement
– No need to modify the web page at other server to be used in your iframe.
– Only need to add some javascript to your web page
The key points of the proposed method are:
– Obtain the HTML code of the web page to be used in your iframe via Yahoo’s YQL
– Create an with attribute src of empty
– Modify the obtained HTML code by adding ‘base’ tag and adding any javascript you want, e.g. for adjusting iframe’s height
– Set the iframe’s content to be the modified HTML code.
Typically, this will have the same content/appearance as the web page at the other server. And more importantly, this is not a cross-domain one, so your script can access anything within the iframe.
For the details, on-line demo, and sample code, please refer to here
http://www.share888.info/published/PublishedDoc.asp?id=2