iframe取消边框后,如何高度自适应、求指教?

最近要自己搭个后台架子,原本DIV就能解决的问题,但变态老板接受不了URL跳转,因此最终想到了iframe加载,目前卡在高度自适应问题上了、、、求大神帮帮忙,如何在取消滚动条的情况下,让iframe里面的内容得到完整展示呢?

有做过的朋友麻烦指教下,最好是能有个简单的demo,先O(∩_∩)O谢谢啦、拜托!

阅读 2.7k
2 个回答
$(function() {

  // 自适应iframe高度
  if (window.frameElement) {

    var paddingPenalty = 60;
    var containerMinHeight = 1000;

    var $window = $(window);
    var $body = $(window.document.body);
    var $parentFrame = $(window.frameElement);
    var $parentFrameContainer = $parentFrame.parent();

    var parentFrameContainerOriginHeight = $parentFrameContainer.height();

    var parentFrameHeight = parentFrameContainerOriginHeight + paddingPenalty;

    // 自适应parent frame高度的function
    var resizeParentFrame = function(newHeight) {
      if ($parentFrame.is(':hidden')) {
        return;
      }
      if (parent.window.frameElement) {
        var $nestedParentFrame = $(parent.window.frameElement);
        var $nestedParentFrameContainer = $nestedParentFrame.parent();
        var nestedParentFrameHeight = $nestedParentFrameContainer.outerHeight();

        if ($nestedParentFrame.is(':hidden')) {
          return;
        }
        var tempHeight = newHeight;
        tempHeight += paddingPenalty;
        if (parentFrameHeight && (parentFrameHeight < nestedParentFrameHeight)) {
          $nestedParentFrameContainer.css('height', tempHeight <= parentFrameHeight ? parentFrameHeight : tempHeight);
        } else {
          $nestedParentFrameContainer.css('height', tempHeight <= nestedParentFrameHeight ? nestedParentFrameHeight : tempHeight);
        }
      }

      newHeight += paddingPenalty;
      $parentFrameContainer.css('height', newHeight <= containerMinHeight ? containerMinHeight : newHeight);
    }

    // iframe关闭的时候,取消iframe的高度
    $window.unload(function() {
      $parentFrameContainer.css('height', parentFrameContainerOriginHeight);
    });

    // 页面加载的完毕后,调整iframe高度
    //resizeParentFrame($body.height());
    resizeParentFrame(containerMinHeight);

    // 每隔500ms侦测body实际内容高度是否发生变化
    var checkBodyHeight = function(){
      var lastHeight = containerMinHeight, newHeight, timer;
      (function run(){

        if (!$parentFrame.is(':hidden')) {
          newHeight = $body.height();
          if (newHeight > parseInt($parentFrame.parent().css("height").replace("px", ""))) {
            $parentFrame.parent().css("height", newHeight);
          }
          if( newHeight > lastHeight ) {
            resizeParentFrame(newHeight);
          }
          lastHeight = newHeight + paddingPenalty;
        }

        timer = setTimeout(run, 200);

      })();
    }
    checkBodyHeight();

  }

});
//html
<div id="iframeBox">
    <iframe src=""></iframe>
</div>
//js
$('#iframeBox').find('iframe').attr('src',src);         
       $('#iframeBox').find('iframe').load(function(){    
           //iframe框架页面正常高度      
            var height=$(this).contents().find('body').height(); 
            //iframeBoxHeight固定为780px
            var iframeBoxHeight=780;
            if(height > iframeBoxHeight){                
                $(this).height(height); 
            }else{
                $(this).height(iframeBoxHeight);
            }                              
       });  
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题