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

Question

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

像这种需求应该如何写？

三叔 · Answer

按钮在哪儿？按钮在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;
}