Make Iframe Height Dynamic Based on Content Inside- Jquery/Javascript

Set iframe height dynamically

you can't get the iframe size because cross domain issue , but i think this library can solve the problem.
iframe-resizer

Make iframe automatically adjust height according to the contents without using scrollbar?

Add this to your <head> section:

<script>
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
}
</script>

And change your iframe to this:

<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />

As found on sitepoint discussion.

How to change height of iframe based on dynamic conent within the iframe?

Does this work for you?

http://jsfiddle.net/PmBrd/1/

Code:

var iframe = document.getElementById("ifr").contentWindow;

iframe.$(".toggle_div").bind("change", function () {
$("#ifr").css({
height: iframe.$("body").outerHeight()
});
});

Since you mentioned they are in the same domain, it's just a matter of doing something similar with your real app.



Related Topics



Leave a reply



Submit