网页iframe框架自动适应高度且去除滚动条

一、问题

①iframe的高度始终等于嵌入页面内容的高度，而不是屏幕的高度（导致有两个滚动条）

②右侧不允许出现两个滚动条

③iframe的高度自适应不仅仅是指刚加载进来时，也有可能嵌入内容的高度会随点击变化（如：下拉菜单，左侧导航栏等）

④页面可能同时嵌入多个iframe

二、解决方法

html:

 css:

 

 js

为了方面使用，我把代码粘贴在下面几个，自行使用

html代码如下：

<iframe id="myIframe" class="flexiframe" src="homepage.html" marginwidth="0"
            frameborder = "no" scrolling="no" height="0" frameborder="0" ></iframe>

css代码如下：

/*设置框架的样式*/
iframe {
    padding: 0;
    width: 100%;
}

 js代码如下:

//设置高度的方法

function setIframeHeight(iframe) {
    if (iframe) {
        var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
        if (iframeWin.document.body) {
            //这边加五十是高度，如果想要再高一点的页面可以将数字变大，可以自己调
            iframe.height = iframeWin.document.body.scrollHeight+50;
        }
    }
};
//这边无论是多个iframe还是单个，都可以用
$(".flexiframe").each(function (index) {
    var that = $(this);
    (function () {
        setInterval(function () {
            //设置点击的页面高，调用上面的方法
            setIframeHeight(that[0])
        }, 200)
    })(that)
});