Question

我正在测试自动iframe调整大小的代码片段。代码如下：

    <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包含的页面上。但是，我缺乏解决问题的知识。

欢迎任何反馈意见。

Answer 1

您的代码完全错误。

作为初学者，您的选择器不会选择iframe类

而$("iframe")应该是$(".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>相同表示您正在选择ID。

您的括号也不正确：

下面是代码的更正，它会显示iframe（部分），但是您需要更正代码才能显示它。

{{1}}

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

自动调整iframe的高度

1 个答案: