Question

我正在使用Spring MVC框架开发一个Web应用程序，在我的一个模块中，我实现了<iframe>来显示用户帖子和评论。现在我的问题是应该根据<iframe>中的内容动态设置<iframe>高度。我正在使用以下JavaScript来实现此目的。它在Firefox和Internet Explorer中运行良好，但在谷歌浏览器和Safari中无效。如何解决这个问题？

function sizeFrame() {
  jQuery("#myframe", top.document).css({ height: 0 });
                        var iframe=document.getElementById('myframe');
                var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
                var the_height=0;
                 if (iframeWin.document.body) {
                 the_height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
                }
               jQuery("#myframe", top.document).css({ height: the_height }); 
              }

             </script>

Answer 1

将以下代码添加到解决问题的javascript函数中，

var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
var is_safari=navigator.userAgent.toLowerCase().indexOf('safari') > -1;
 if(is_chrome || is_safari)
{
jQuery("#myframe", top.document).css({ height: 0 }); 
var myframe = jQuery("#myframe");var innerDoc = (myframe.get(0).contentDocument) ? myframe.get(0).contentDocument : myframe.get(0).contentWindow.document;
var h;
if(innerDoc.body.scrollHeight)
 h=innerDoc.body.scrollHeight+35;
else
 h=innerDoc.documentElement.scrollHeight;
jQuery("#myframe", top.document).css({ height: h  }); 
}

在Google Chrome和Safari </iframe>中设置<iframe>的动态高度

1 个答案: