动态设置 iframe 高度；不适用于ie和chrome答案

【问题标题】：dynamically setting the iframe height; not working on ie and chrome动态设置 iframe 高度；不适用于ie和chrome
【发布时间】：2012-02-01 01:55:21
【问题描述】：

我正在尝试使用 javascript 和 Jquery 动态设置 iframe 的高度。

但由于某种原因，这在 Ie8 和 chrome 中不起作用。（但它在 Firefox 上运行良好）

有人可以帮忙吗？

谢谢

 function resizePanel() {
         window.console.log("ran the resize panel function");
     var frame = document.getElementsByTagName('iframe')[0];
    if(frame != null) {

        var height;            
        if(self.innerHeight) {
            window.console.log("ran the self.innerHeight");
            height= self.innerHeight;                             
        }
        else if (document.documentElement && (document.documentElement.clientHeight)) {
           window.console.log("ran the clientHeight");
           height = document.documentElement.clientHeight;                           
         }
         else if(document.body) {
           window.console.log("ran the document.body");
           height = document.body.clientHeight;            
         }
         frame.style.height = height - 165 + 'px'         
    }};

    $(document).ready(function() {
        resizePanel();
        $(window).resize(function() {
            resizePanel();
        });
    });  

    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_endRequest(EndRequest);

    function EndRequest(sender, args) {
        resizePanel();
    }

【问题讨论】：

标签： javascript jquery iframe cross-browser

【解决方案1】：

您的代码似乎有点复杂，您可以执行以下操作：

function resizePanel() {
    window.console.log("ran the resize panel function");
    var frame = document.getElementsByTagName('iframe')[0];
    if(frame != null) {
        frame.style.height = frame.contentWindow.document.body.scrollHeight + "px";
    }
}

应该可以在所有主流浏览器中使用。

【讨论】：

【解决方案2】：

只需更改一行代码即可在所有浏览器上正常运行。

而不是使用

var frame = document.getElementsByTagName('iframe')[0];

使用

var frame = document.getElementById("ctl00_ctl00_ContentPlaceHolder1_Options_iframe");

问题是 Chrome 和 IE 隐藏了 iframe，当我们使用 getElementsByTagName 时，它会返回所有 iframe 的数组。所以我们尝试访问 [0] 索引，它指的是其他一些 iframe。

我希望这会有所帮助。

完整代码为：

 function resizePanel() {

         var frame = document.getElementById("ctl00_ctl00_ContentPlaceHolder1_Options_iframe");
    if(frame != null) {

        var height;            
        if(self.innerHeight) {

            height= self.innerHeight;                             
        }
        else if (document.documentElement && (document.documentElement.clientHeight)) {

           height = document.documentElement.clientHeight;                       
         }
         else if(document.body) {

           height = document.body.clientHeight;            
         }
         frame.style.height = height - 165 + 'px'

    }};

    $(document).ready(function() {
        resizePanel();
        $(window).resize(function() {
            resizePanel();
        });
    });  

    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_endRequest(EndRequest);

    function EndRequest(sender, args) {
        resizePanel();
    }

【讨论】：