Question

我想根据iframe内容的更改方式更改iframe高度，但如果iframe的内容的高度值低于150px，我就会遇到问题。

我在Firefox和Chrome中测试了这段代码，结果相同。在这里你可以测试它https://jsfiddle.net/bqvc0pp5/17/

从我看到的如果没有指定高度，iframe将自动拥有150px（没有边框）。在这个例子中，我将值增加到300px然后降低到200px而不是50px。一切都很好，直到50px转换为150px;

    var iframe = document.createElement('iframe');
    iframe.setAttribute("scrolling","no");

    iframe.onload = () => {
      builtElement();
    };

    //append iframe to main document
    document.body.appendChild(iframe);

    var k=0;


    function builtElement(){
        var div = document.createElement('div');
      div.style.height="50px";
      div.style.backgroundColor="salmon";
      iframe.contentWindow.document.body.style.margin="0px";
      iframe.contentWindow.document.body.appendChild(div);

      div.addEventListener("click", () =>{
            if(k==0){
            div.style.height="300px";
          }
          if(k==1){
            div.style.height="200px";
          }
          if(k==2){
            div.style.height="50px";
          }
          if(k>=2) k=0;
          else k++;
          updateIframeHeight();
      });
    }


    function updateIframeHeight(){
        //I need to reset height or else scrollHeight will be the last max value
      iframe.style.height="";
        var height = iframe.contentWindow.document.body.scrollHeight;
      //this is a dirty hack where I can check if offsetHeight is lower than 150px
      var offsetHeight = iframe.contentWindow.document.body.offsetHeight;
      //if(offsetHeight<150) height=offsetHeight;
      console.log("scrollHeight: "+height);
      console.log("scrollHeight: "+offsetHeight);
      iframe.style.height=height+"px";
    }

如果我做了一点黑客并检查offsetHeight是否低于150像素，那就可以了。

  var offsetHeight = iframe.contentWindow.document.body.offsetHeight;
  if(offsetHeight<150) height=offsetHeight;

这是最好的方法吗？

UPDATE ：在一个实际例子中，iframe主体包含多个元素，但只有某些元素会改变高度，因此更改主体scrollHeight

Answer 1

我找到了解决方案。您所要做的就是将大小设置为0px;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid option1">
  <h3>Option 1</h3>
  <p>
    This uses a .row .container selector rule to enforece the padding removal on containers nested in rows.
  </p>
  <div class="row row-green">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      I am the row above!
    </div>
  </div>
  <div class="row">
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 blue-half">
      <div class="container">
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            I am the blue container!
          </div>
        </div>
      </div>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 red-half">
      <div class="container">
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            I am the red container!
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="container-fluid option2">
  <h3>Option 2</h3>
  <p>
    This uses an unindent CSS class on the containers that need to have the padding removed
  </p>
  <div class="row row-green">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      I am the row above!
    </div>
  </div>
  <div class="row">
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 blue-half">
      <div class="container unindent">
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            I am the blue container!
          </div>
        </div>
      </div>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 red-half">
      <div class="container unindent">
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            I am the red container!
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

我之前执行的操作iframe.style.height="0px";默认将高度设置为150px。看来如果没有指定大小，则iframe大小将为150px;

Answer 2

这不是最终的解决方案，但这可以帮助您解决问题，而不是黑客攻击：

[Fiddle][1]https://jsfiddle.net/Marouen/qskpdn8b/

iframe高度值低于150px

2 个答案: