Question

我正在尝试调整iframe的大小以适应内容。在看到其他人如何完成它之后，我认为最简单的方法是获取iframe的scrollHeight并相应地调整iframe的大小。我在iframe标签中使用onload来运行它。我已经在这个主题上编写了数十种变体而没有成功。

 function resizeIFrame(){

     var sHeight, frame;

      frame = document.getElementById("bigFrame");
      sHeight = frame.scrollHeight;
      frame.style.height = sHeight + 'px';
    }

当我提示sHeight变量时，我得到帧的高度而不是scrollHeight。这表明我可能没有正确收集scrollHeight。

我知道这个问题可能与之前的许多问题类似，但有很多方法可以解决这个问题以及更广泛的答案。我想知道这种调整iframe以适应内容的方法有什么问题？

这是html。

   <div id="contentContainer">
       <iframe id="bigFrame" 
                src="home/home.html" 
                name="mainFrame"     
                onload="resizeIFrame()" 
                onresize="resizeIFrame()" 
                scrolling="no" 
                seamless;  >
            </iframe>
   </div>

Answer 1

尝试

frame.style.height = sHeight + 'px';

Answer 2

好的，我完美地工作了。
添加 - contentWindow.document.body.scrollHeight - 使我能够获得scrollHeight。我试图从变量中获取scrollHeight。这没有用。有效的方法是从文档中直接获取scrollHeight。

我必须在每个页面的底部添加一些空格。因此+80;。不幸的是，每次调用该函数时，这只添加了80。在重新调整之前将帧高度重置为0px解决了问题。

所以你去吧。此函数通过获取scrollHeight并将iframes高度设置为匹配来调整iframe的大小以适合其内容。

originalEncoding = "UTF-8"

通过获取scrollHeight（javascript）调整iFrame大小以适合内容

2 个答案: