使iframe高度基于内部内容动态-JQUERY/Javascript

我正在iframe中加载一个aspx网页。Iframe中的内容可以比Iframe的高度更高。iframe不应具有滚动条

我在iframe中有一个wrapper

div

标记，它基本上就是所有内容。我编写了一些jQuery以实现调整大小：

$("#TB_window", window.parent.document).height($("body").height() + 50);

在哪里

tbu窗口

是包含

Iframe

的div

body

-iframe中aspx的body标签

---

此脚本附加到iframe内容。我正在从父页面获取

tbu窗口

元素。虽然这在Chrome上运行良好，但在Firefox中TB_窗口会崩溃。我真的不明白为什么会发生这种情况。

您可以使用以下方法检索

IFRAME

内容的高度：

contentWindow.document.body.scrollHeight

加载

IFRAME

后，您可以通过执行以下操作更改高度：

<script type="text/javascript">
  function iframeLoaded() {
      var iFrameID = document.getElementById('idIframe');
      if(iFrameID) {
            // here you can make the height, I delete it first, then I make it again
            iFrameID.height = "";
            iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
      }   
  }
</script>   

不久前我遇到过这样一种情况，在内部发生表单提交后，我还需要从

IFRAME

本身调用

iframeload

。您可以通过在

IFRAME

的内容脚本中执行以下操作来实现这一点：

parent.iframeLoaded();

和/或

$(window).height()

请参阅堆栈溢出问题

尝试以下操作以在jQuery中查找主体的高度：

if $("body").height()

---

它没有一个值，如果。也许这就是问题所在。

对亚里士多德的回答稍微有点改进

<script type="text/javascript">
  function resizeIframe(iframe) {
    iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
  }
</script>  

从更新后的iframe中。为同一来源工作

或自动检测：

  // on resize
  this.container = this.frameElement.contentWindow.document.body;

  this.watch = () => {
    cancelAnimationFrame(this.watcher);

    if (this.lastScrollHeight !== container.scrollHeight) {
      parent.resizeIframeToContentSize(this.frameElement);  
    }
    this.lastScrollHeight = container.scrollHeight;
    this.watcher = requestAnimationFrame(this.watch);
  };
  this.watcher = window.requestAnimationFrame(this.watch);

---

我发现特洛伊的答案不起作用。这与为ajax重新编写的代码相同：

$.ajax({                                      
    url: 'data.php',    
    dataType: 'json',                             

    success: function(data)
    {
        // Put the data onto the page

        // Resize the iframe
        var iframe = $(window.top.document).find("#iframe");
        iframe.height( iframe[0].contentDocument.body.scrollHeight+'px' );
    }
});

---

要添加到底部似乎被切断的窗口块中，尤其是当您没有我使用的滚动时：

function resizeIframe(iframe) {
    var addHeight = 20; //or whatever size is being cut off
    iframe.height = iframe.contentWindow.document.body.scrollHeight + addHeight + "px";
  }

---

您可以查看四种不同的属性来获取iFrame中内容的高度

document.documentElement.scrollHeight
document.documentElement.offsetHeight
document.body.scrollHeight
document.body.offsetHeight

可悲的是，它们都可以给出不同的答案，而这些答案在浏览器之间并不一致。如果将正文边距设置为0，则

document.body.offsetHeight

将给出最佳答案。要获得正确的值，请尝试此函数；它取自库，该库还负责在内容更改或浏览器调整大小时保持iFrame的正确大小

function getIFrameHeight(){
    function getComputedBodyStyle(prop) {
        function getPixelValue(value) {
            var PIXEL = /^\d+(px)?$/i;

            if (PIXEL.test(value)) {
                return parseInt(value,base);
            }

            var 
                style = el.style.left,
                runtimeStyle = el.runtimeStyle.left;

            el.runtimeStyle.left = el.currentStyle.left;
            el.style.left = value || 0;
            value = el.style.pixelLeft;
            el.style.left = style;
            el.runtimeStyle.left = runtimeStyle;

            return value;
        }

        var 
            el = document.body,
            retVal = 0;

        if (document.defaultView && document.defaultView.getComputedStyle) {
            retVal =  document.defaultView.getComputedStyle(el, null)[prop];
        } else {//IE8 & below
            retVal =  getPixelValue(el.currentStyle[prop]);
        } 

        return parseInt(retVal,10);
    }

    return document.body.offsetHeight +
        getComputedBodyStyle('marginTop') +
        getComputedBodyStyle('marginBottom');
}

---

我发现接受的答案是不够的，因为X-FRAME-OPTIONS:Allow From。取而代之的是一种不同的方法，这是在Discus公司的Ben醋中发现的。其思想是向父窗口添加一个事件侦听器，然后在iframe内部，使用window.postMessage向父窗口发送一个事件，告诉它做些什么（调整iframe的大小）

因此，在父文档中，添加一个事件侦听器：

window.addEventListener('message', function(e) {
  var $iframe = jQuery("#myIframe");
  var eventName = e.data[0];
  var data = e.data[1];
  switch(eventName) {
    case 'setHeight':
      $iframe.height(data);
      break;
  }
}, false);

在iframe中，编写一个函数来发布消息：

function resize() {
  var height = document.getElementsByTagName("html")[0].scrollHeight;
  window.parent.postMessage(["setHeight", height], "*"); 
}

最后，在iframe内部，向body标记添加一个onLoad以启动调整大小功能：

<body onLoad="resize();">

---

将此添加到iframe，这对我很有用：

onload="this.height=this.contentWindow.document.body.scrollHeight;"

如果使用jQuery，请尝试以下代码：

onload="$(this).height($(this.contentWindow.document.body).find(\'div\').first().height());"

---

你可在此查阅有关问题-

设置动态高度的步骤-

我们需要与跨域iFrame和父级进行通信

然后我们可以将iframe的滚动高度/内容高度发送到父窗口

---

和代码-

当您需要一个没有jquery的解决方案时，此选项非常有用。在这种情况下，您应该尝试添加一个容器，并以百分比为单位设置填充

HTML示例代码：

<div class="iframecontainer">
    <iframe scrolling="no" src="..." class="iframeclass"width="999px" height="618px"></iframe>
</div>

.iframeclass{
    position: absolute;
    top: 0;
    width: 100%;
}

.iframecontainer{
    position: relative;
    width: 100%;
    height: auto;
    padding-top: 61%;
}

---

简单的解决方案是测量内容区域的宽度和高度，然后使用这些测量值计算底部填充百分比

在这种情况下，测量值为1680 x 720 px，因此底部的填充为720/1680=0.43*100，即43%

.canvas-container {    
    position: relative;
    padding-bottom: 43%; // (720 ÷ 1680 = 0.4286 = 43%)
    height: 0;
    overflow: hidden;   
}

.canvas-container iframe {    
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;   
}

---

对蓝鱼的一个稍微改进的答案

function resizeIframe(iframe) {
    var padding = 50;
    if (iframe.contentWindow.document.body.scrollHeight < (window.innerHeight - padding))
        iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
    else
        iframe.height = (window.innerHeight - padding) + "px";
}

函数resizeIframe（iframe）{
var=50；
if（iframe.contentWindow.document.body.scrollHeight<（window.innerHeight-填充））
iframe.height=iframe.contentWindow.document.body.scrollHeight+“px”；
其他的
iframe.height=（window.innerHeight-padding）+“px”；
}

这考虑了windows屏幕（浏览器、手机）的高度，这有利于响应性设计和具有巨大高度的iFrame。 Padding表示在iframe穿过整个屏幕时，在iframe的上方和下方所需的填充

jQuery（'.home\u vidio\u img1 img'）。单击（函数（）{
jQuery('.home_vidio_img1 img').click(function(){
    video = '<iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>';
    jQuery(this).replaceWith(video);
});

jQuery('.home_vidio_img2 img').click(function(){
    video = <iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>;
    jQuery('.home_vidio_img1 img').replaceWith(video);
    jQuery('.home_vidio_img1 iframe').replaceWith(video);
});

jQuery('.home_vidio_img3 img').click(function(){
    video = '<iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>';
    jQuery('.home_vidio_img1 img').replaceWith(video);
    jQuery('.home_vidio_img1 iframe').replaceWith(video);
});

jQuery('.home_vidio_img4 img').click(function(){
    video = '<iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>';
    jQuery('.home_vidio_img1 img').replaceWith(video);
    jQuery('.home_vidio_img1 iframe').replaceWith(video);
});

视频=''；
jQuery（this.replaceWith）（视频）；
});
jQuery（'.home\u vidio\u img2 img'）。单击（函数（）{
视频=；
jQuery（'.home\u vidio\u img1 img'）.replaceWith（视频）；
jQuery（'.home\u vidio\u img1 iframe'）.replaceWith（视频）；
});
jQuery（'.home\u vidio\u img3 img'）。单击（函数（）{
视频=''；
jQuery（'.home\u vidio\u img1 img'）.replaceWith（视频）；
jQuery（'.home\u vidio\u img1 iframe'）.replaceWith（视频）；
});
jQuery（'.home\u vidio\u img4 img'）。单击（函数（）{
视频=''；
jQuery（'.home\u vidio\u img1 img'）.replaceWith（视频）；
jQuery（'.home\u vidio\u img1 iframe'）.replaceWith（视频）；
});

我发现最简单的方法是：

---

以防万一这对任何人都有帮助。为了让它发挥作用，我竭尽全力，然后我注意到iframe有一个高度为100%的类条目。当我移除这个时，一切都按预期进行。因此，请检查是否存在任何css冲突。

您还可以将重复的requestAnimationFrame添加到resizeIframe中（例如，从@BlueFish的答案），它将始终在浏览器绘制布局之前调用，并且当iframe的内容更改其高度时，您可以更新其高度。e、 g.输入表单、延迟加载内容等

<script type="text/javascript">
  function resizeIframe(iframe) {
    iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
    window.requestAnimationFrame(() => resizeIframe(iframe));
  }
</script>  

<iframe onload="resizeIframe(this)" ...

函数resizeIframe（iframe）{
iframe.height=iframe.contentWindow.document.body.scrollHeight+“px”；
requestAnimationFrame（（）=>resizeIframe（iframe））；
}
其他答案对我不起作用，所以我做了一些改变。希望这会有所帮助

$('#iframe').on("load", function() {
    var iframe = $(window.top.document).find("#iframe");
    iframe.height(iframe[0].ownerDocument.body.scrollHeight+'px' );
});

使用PHPH的示例
function resizeIframe(iframe) {
    var padding = 50;
    if (iframe.contentWindow.document.body.scrollHeight < (window.innerHeight - padding))
        iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
    else
        iframe.height = (window.innerHeight - padding) + "px";
}

jQuery('.home_vidio_img1 img').click(function(){
    video = '<iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>';
    jQuery(this).replaceWith(video);
});

jQuery('.home_vidio_img2 img').click(function(){
    video = <iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>;
    jQuery('.home_vidio_img1 img').replaceWith(video);
    jQuery('.home_vidio_img1 iframe').replaceWith(video);
});

jQuery('.home_vidio_img3 img').click(function(){
    video = '<iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>';
    jQuery('.home_vidio_img1 img').replaceWith(video);
    jQuery('.home_vidio_img1 iframe').replaceWith(video);
});

jQuery('.home_vidio_img4 img').click(function(){
    video = '<iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>';
    jQuery('.home_vidio_img1 img').replaceWith(video);
    jQuery('.home_vidio_img1 iframe').replaceWith(video);
});

<script type="text/javascript">
  function resizeIframe(iframe) {
    iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
    window.requestAnimationFrame(() => resizeIframe(iframe));
  }
</script>  

<iframe onload="resizeIframe(this)" ...

$('#iframe').on("load", function() {
    var iframe = $(window.top.document).find("#iframe");
    iframe.height(iframe[0].ownerDocument.body.scrollHeight+'px' );
});

<style>
   .iframe-container {
       display: block;
       position: absolute;
       /*change position as you need*/
       bottom: 0;
       left: 0;
       right: 0;
       top: 0;
   }
   iframe {
       margin: 0;
       padding: 0;
       border: 0;
       width: 100%;
       background-color: #fff;
   }
 </style>
 <div class="iframe-container">
     <iframe src="http://iframesourcepage"></iframe>
 </div>

var iframe = $(window.top.document).find("#iframe_id_here");
iframe.height(iframe.contents().height()+'px' );

var iFrameID = document.getElementById('idIframe');

intval =  setInterval(function(){
if(iFrameID.scrollHeight == iFrameID.contentWindow.document.body.scrollHeight){
     clearInterval(intval);
}else{
   iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
  }
},500)

<iframe src= ${cognosUrl} onload="this.style.height=(this.contentDocument.body.scrollHeight+30) +'px';" scrolling="no" style="width: 100%; min-height: 900px; border: none; overflow: hidden; height: 30px;"></iframe>