javascript - iframe取消边框后,如何高度自适应、求指教?
大家讲道理
大家讲道理 2017-04-11 10:43:47
0
2
239
大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

répondre à tous(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
<p id="iframeBox">
    <iframe src=""></iframe>
</p>
//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);
            }                              
       });  
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!