首页 > js如何动态设置iframe高度宽度?

js如何动态设置iframe高度宽度?

iframe高度等于浏览器可视区域高度减去50px,宽度等于浏览器可视区域宽度减去180px,点击某个按钮iframe宽度等于浏览器可视区域宽度-50px。

像这种需求应该如何写?


CSS calc


按钮在哪儿?
按钮在iframe里面就用下面这段函数做click的回调计算高度

    function clickHanlder() {
        var doc = document,
            p = window.parent,
            iframes = p.frames,
            iframe,
            i = 0;
        while (iframe = iframes[i++]) {
            if (iframe.document == doc) {
                var iheight = doc.documentElement.clientHeight - 50;
                iframe.frameElement.style.height = iheight - 50 + "px";
                break;
            }
        }
    }

按钮在iframe外面就用下面这段函数做click的回调计算高度

    function clickHanlder() {
        var doc = document,
            iframe = document.getElementById('your-iframe-id'),
            iheight = doc.documentElement.clientHeight - 50;
        iframe.style.height = iheight + "px";
    }

宽度用css控制最好,类似下面这样应该可以吧?
.you-iframe-class {

display: block;
margin: 0 90px;

}

【热门文章】
【热门文章】