Question

例如：

<iframe name="Stack" src="http://stackoverflow.com/" width="740"
        frameborder="0" scrolling="no" id="iframe"> ...
</iframe>

我希望它能够根据其中的内容调整其高度，而不使用滚动。

Answer 1

将其添加到您的<head>部分：

<script>
  function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
  }
</script>

并将您的iframe更改为：

<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />

在sitepoint discussion上找到。

Answer 2

您可以使用此库，它们最初可以正确调整iframe的大小，并通过检测iframe内容的大小发生变化（通过setInterval中的常规检查或通过{{}进行检查，从而使其保持正确的大小1}}）并调整它。

<强> https://github.com/davidjbradshaw/iframe-resizer

这适用于跨域和同域iframe。

Answer 3

这是一个紧凑版本：

<iframe src="hello.html"
        onload="this.style.height=this.contentDocument.body.scrollHeight +'px';">
</iframe>

Answer 4

hjpotter92 的建议在safari中不起作用！我对脚本进行了一些小调整，所以它现在也适用于Safari。

只有更改后才会在每次加载时将高度重置为0，以使某些浏览器降低高度。

将其添加到<head>代码：

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

并将以下onload属性添加到您的iframe中，如此

<iframe onload='resizeIframe(this)'></iframe>

Answer 5

避免使用内联JavaScript;你可以使用一个类：

fin = ws.UsedRange.Rows.count

For i = 2 To fin

    ws.Range("AZ" & i).value = Application.WorksheetFunction.CountIf(ws.Range("W2:W" & fin), ws.Range("W" & i))

Next i

For j = fin To 2 Step -1

    If ws.Range("AZ" & j).value > 2 OR Application.WorksheetFunction.CountIf(ws.Range("W2:W" & fin), ws.Range("W" & j)) = 2 Then

        ws.Range("AZ" & j).EntireRow.Delete

    End If
Next j

用jQuery引用它：

<iframe src="..." frameborder="0" scrolling="auto" class="iframe-full-height"></iframe>

Answer 6

hjpotter92 答案在某些情况下效果不错，但我发现iframe内容经常在Firefox＆amp; IE，虽然Chrome很好。

以下适用于我并修复剪辑问题。代码在http://www.dyn-web.com/tutorials/iframes/height/找到。我稍微修改了一下从HTML中获取onload属性。将以下代码放在<iframe> HTML之后和结束</body>代码之前：

<script type="text/javascript">
function getDocHeight(doc) {
    doc = doc || document;
    // stackoverflow.com/questions/1145850/
    var body = doc.body, html = doc.documentElement;
    var height = Math.max( body.scrollHeight, body.offsetHeight, 
        html.clientHeight, html.scrollHeight, html.offsetHeight );
    return height;
}

function setIframeHeight(id) {
    var ifrm = document.getElementById(id);
    var doc = ifrm.contentDocument? ifrm.contentDocument: 
        ifrm.contentWindow.document;
    ifrm.style.visibility = 'hidden';
    ifrm.style.height = "10px"; // reset to minimal height ...
    // IE opt. for bing/msn needs a bit added or scrollbar appears
    ifrm.style.height = getDocHeight( doc ) + 4 + "px";
    ifrm.style.visibility = 'visible';
}

document.getElementById('ifrm').onload = function() { // Adjust the Id accordingly
    setIframeHeight(this.id);
}
</script>

您的iframe HTML：

<iframe id="ifrm" src="some-iframe-content.html"></iframe>

请注意，如果您希望在文档的<head>中加入Javascript，那么您可以恢复使用onload HTML中的内联iframe属性，就像在中一样dyn-web 网页。

Answer 7

jQuery的 .contents（）方法方法允许我们搜索DOM树中元素的直接子元素。

jQuery的：

$('iframe').height( $('iframe').contents().outerHeight() );

请记住，iframe内部的页面正文必须具有高度

CSS：

body {
  height: auto;
  overflow: auto
}

Answer 8

这对我有效（在一页上也有多个iframe）：

$('iframe').load(function(){$(this).height($(this).contents().outerHeight());});

Answer 9

这对我（主要是）有用。

将它放在页面底部。

<script type="application/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

<script type="application/javascript" src="/script/jquery.browser.js">
</script>

<script type="application/javascript" src="/script/jquery-iframe-auto-height.js">
</script>

<script type="application/javascript"> 
  jQuery('iframe').iframeAutoHeight();
  $(window).load(
      function() {
          jQuery('iframe').iframeAutoHeight();  
      }
  );

  // for when content is not html e.g. a PDF
  function setIframeHeight() {
      $('.iframe_fullHeight').each(
          function (i, item) {
              item.height = $(document).height();
          }
      );
  };

  $(document).ready( function () {
      setIframeHeight();
  });
  $(window).resize( function () {
      setIframeHeight();
  });
</script>

上半部分来自???，并且在iframe中有html时有效。当iframes类为iframe_fullHeight时，后半部分将iframe设置为页面高度（不是内容高度）。如果内容是PDF或其他类似内容，您可以使用此功能，但必须设置类。也只能在全高度合适的情况下使用。

注意：出于某种原因，在窗口调整大小后重新计算时，它会出现高度错误。

Answer 10

jq2('#stocks_iframe').load(function(){
var iframe_width = jq2('#stocks_iframe').contents().outerHeight() ; 
jq2('#stocks_iframe').css('height',iframe_width); });

<iframe id='stocks_iframe' style='width:100%;height:0px;' frameborder='0'>

Answer 11

尝试使用IE11

<iframe name="Stack" src="http://stackoverflow.com/" style='height: 100%; width: 100%;' frameborder="0" scrolling="no" id="iframe">...</iframe>

Answer 12

function autoResize(id){
    var newheight;
    var newwidth;

    if(document.getElementById){
        newheight=document.getElementById(id).contentWindow.document.body.scrollHeight;
        newwidth=document.getElementById(id).contentWindow.document.body.scrollWidth;
    }

    document.getElementById(id).height=(newheight) + "px";
    document.getElementById(id).width=(newwidth) + "px"; 
}

将此添加到您的iframe：的onload =＆＃34;自动调整（＆＃39; youriframeid＆＃39;）＆＃34;

Answer 13

我是用AngularJS做的。 Angular没有ng-load，但是制作了第三方模块;在下方安装凉亭，或在此处找到：https://github.com/andrefarzat/ng-load

获取ngLoad指令：bower install ng-load --save

设置您的iframe：

<iframe id="CreditReportFrame" src="about:blank" frameborder="0" scrolling="no" ng-load="resizeIframe($event)" seamless></iframe>

Controller resizeIframe功能：

$scope.resizeIframe = function (event) {
    console.log("iframe loaded!");
    var iframe = event.target;
    iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
};

Answer 14

我过去曾遇到问题，为动态创建的iframe调用iframe.onload，所以我采用这种方法来设置iframe大小：

iFrame查看

var height = $("body").outerHeight();
parent.SetIFrameHeight(height);

主视图

SetIFrameHeight = function(height) {
    $("#iFrameWrapper").height(height);
}

（只有在两个视图位于同一个域中时才会起作用）

Answer 15

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

这不适用于Chrome。但是为firefox工作。

Answer 16

我想让RequestQueue queue = Volley.newRequestQueue(getApplicationContext()); StringRequest request = new StringRequest(Request.Method.POST, url, new Response.Listener<String>() { @Override public void onResponse(String s) { // Success } }, new Response.ErrorListener() { @Override public void onErrorResponse(VolleyError volleyError) { // Error } }) { @Override protected Map<String, String> getParams() throws AuthFailureError { return params; } }; queue.add(request);表现得像普通页面（我需要在iframe元素中制作全屏横幅），所以这是我的脚本：

iframe

这些功能不言自明，并有进一步解释其目的的评论。

Answer 17

此选项将100％

<iframe id='iframe2' src="url.com" frameborder="0" style="overflow: hidden; height: 100%; width: 100%; position: absolute;" height="100%" width="100%"></iframe>

iframe会根据内容自动调整高度而不使用滚动条？

17 个答案: