自动调整 iframe 的高度答案

【问题标题】：Automatically resize height of iframe自动调整 iframe 的高度
【发布时间】：2014-08-15 18:04:17
【问题描述】：

我正在测试用于自动调整 iframe 大小的 sn-p 代码。代码如下：

    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
    <script type='text/javascript'>

        $(function(){

            var iFrames = $('iframe');

            function iResize() {

                for (var i = 0, j = iFrames.length; i < j; i++) {
                  iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';}
                }

                if ($.browser.safari || $.browser.opera) { 

                   iFrames.load(function(){
                       setTimeout(iResize, 0);
                   });

                   for (var i = 0, j = iFrames.length; i < j; i++) {
                        var iSource = iFrames[i].src;
                        iFrames[i].src = '';
                        iFrames[i].src = iSource;
                   }

                } else {
                   iFrames.load(function() { 
                       this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
                   });
                }

            });

    </script>

我试图包含的页面如下： http://iframe.imoti.co/index.php

带有 iframe 的页面是：http://iframe.imoti.co/iframe.html

但是，它似乎不起作用。 iframe 以零高度显示。我想，问题出在 /index.php 包含的页面上。但是，我确实缺乏解决问题的知识。

欢迎任何反馈。

【问题讨论】：

您的索引页上没有内容。这可能是它以 0 高度加载的原因。

标签： jquery iframe height

【解决方案1】：

您的代码完全错误。

作为初学者，您的选择器没有选择 iframe 类

应该是$(".iframe") 而不是$("iframe")，因为. 表示您正在选择一个班级。与#相同表示您正在选择一个ID。

你的括号也不正确：

以下是对确实显示 iframe（部分）的代码的更正，但是您需要更正代码以使其按您希望的方式显示。

<script type='text/javascript'>

    $(function(){

        var iFrames = $('.iframe');

        function iResize() {

            for (var i = 0, j = iFrames.length; i < j; i++) {
              iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';
            }


            if ($.browser.safari || $.browser.opera) { 

               iFrames.load(function(){
                   setTimeout(iResize, 0);
               });

               for (var i = 0, j = iFrames.length; i < j; i++) {
                    var iSource = iFrames[i].src;
                    iFrames[i].src = '';
                    iFrames[i].src = iSource;
               }

            } else {
               iFrames.load(function() { 
                   this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
               });
            }
        }        
   });
</script>

如果您尝试自动调整应用大小，我相信您的问题过于复杂。此外，关于 SEO，我强烈建议不要使用 IFrame，因为关于搜索引擎是否读取 IFrame 以及是否复制内容存在争议。但是，这是超出问题范围的另一个问题。

【讨论】：