制作可动态更新其高度的iframe

时间:2019-09-05 08:19:33

标签: javascript jquery html

我正在尝试调整iframe的大小,因为它的内部包含滚动条。由于这不是我想要的结果,因此我一直在尝试调整框架的大小。

我很快就注意到iframe中的页面具有动态高度,根据页面上的内容量在1000到5000+ px之间移动。

我试图使用jQuery来读取页面的大小并根据该大小进行更新,但这被证明是不成功的。

我遇到的解决方案都是使用外部javascript库,而我试图避免这种情况。我只是想确定是否还有其他方法。

<div id="tabMan" class="tabContent hide">

<iframe width="100%" seamless="seamless" style="height: 1020px; border: none; overflow: hidden;" data-animation-speed="2" data-offet-top="0" src="https://www.google.com/"></iframe>
</div>


   function resize( frame ) {
       var b = frame.contentWindow.document.body || frame.contentDocument.body,
              cHeight = $(b).height();

          if( frame.oHeight !== cHeight ) {
            $(frame).height( 0 );
            frame.style.height = 0;

            $(frame).height( cHeight );
            frame.style.height = cHeight + "px";

            frame.oHeight = cHeight;
          }

          // Call again to check whether the content height has changed.
          setTimeout( function() { resize( frame ); }, 250 );
        }

        window.onload = function() {
          var frame,
              frames = document.getElementsByTagName( 'iframe' ),
              i = frames.length - 1;

          while( i >= 0 ) {
            frame = frames[i];
            frame.onload = resize( frame );

            i -= 1;
          }
        };

0 个答案:

没有答案