CODEWITHSUNDEEP
javascripthtmliframedynamicresize
blackessej
blackessej

Reputation: 704

Dynamically adjust an iframe's height

I have an iframe that contains some content from a site. I want the iframe to adjust to 100% of the src content's height. Bit of a noob at js - here's what I'm working with:

  <iframe id="frame" scrolling="no" frameborder="0" src="http://www.srcwebsite.org"></iframe>

    <script type="text/javascript">
    function resizeIframe() {
        var height = document.documentElement.clientHeight;
        height -= document.getElementById('frame').offsetTop;

        height -= 20; /* whatever you set your body bottom margin/padding to be */

        document.getElementById('frame').style.height = height +"px";

    };
    document.getElementById('frame').onload = resizeIframe;
    window.onresize = resizeIframe;
    </script>

This works great to resize the height of the iframe to its page, but I want it to resize it to the height of the src...

Upvotes: 4

Views: 1749

Answers (1)

alex
alex

Reputation: 490657

You can't access the height of the iframe's content because of Same Origin Policy (protocol, domain and ports must match).

You could set up CORS, keep in mind it's not supported in IE until IE8.

Upvotes: 3

Related Questions