动态增加iframe的高度

To dynamically increase the height of the iframe

本文关键字:高度 iframe 增加 动态      更新时间:2023-09-26

我有一个页面,我插入了一个iframe。当加载子页面时,我使用下面的代码动态设置iframe的值:

父页面:

`<iframe src="/test.do" id="iframeTest">`
function setIframeHeight(height) {
$("#iframeTest").height(height);
}

子页面:test.jsp:

  <div id="test">
  <table>The whole content will be inside this div</table> 
  </div>
    $(document).ready(function() {
    var height = $("#test").outerHeight();
    parent.setIframeHeight(height);
        }

现在,每当子页面的高度增加时(即每当包含新的<tr>时),我将调用parent.setIframeHeight()以增加iframe的高度。我测试了这个,对我来说很好。我想知道这是增加框架高度的正确方法吗?或者还有其他选择吗?

试试这个:如果您的子页面内容连续更改或间隔一段时间后更改:

setInterval(function(){iframeLoaded}, 2000);
function iframeLoaded() {
  var iFrameID = document.getElementById('iframeTest');
  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";
  }   
 }