动态调整iframe的高度 [英] Dynamically adjust an iframe's height

问题描述

我有一个包含网站内容的iframe。我希望iframe能够调整到src内容高度的100％。

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>

这对于调整iframe到页面的高度很有效，但我希望它调整大小到src的高度...

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...

推荐答案

您无法访问 iframe的高度的内容，因为同源策略（协议，域名和端口必须匹配）。

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

您可以设置 CORS ，请记住它在IE8以前不支持IE。

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

这篇关于动态调整iframe的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！