How to dynamically adjust iframe height of a Shindig Gadget

Question

I want to dynamically adjust the height of an iframe of a Shindig Gadget depending on content inside of it. After some research I found out that it is required such iframe src to have <!DOCTYPE ...> declared to get the height of the content inside iframe using the following:

document.getElementById("iframe").contentWindow.document.body.scrollHeight

But it is impossible to define a doctype inside <![CDATA[ of a Shinding module. What's the best way to achieve this?

Answer 1

Try this

Here is an working example click here

<script type="text/javascript">
 function resizeIframe(obj)
  {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
 }
</script>

<iframe src="http://www.yahoo.com" onload='javascript:resizeIframe(this);'></iframe>

</div>

Answer 2

You should use the adjustHeight API in order to do this. Calling the API without any arguments will adjust the iFrames height to fit it's contents. http://opensocial-resources.googlecode.com/svn/spec/trunk/Core-Gadget.xml#gadgets.window.adjustHeight