动态增加iframe的高度

Question

I have a page where I have inserted an iframe. When the child page is loaded, I dynamically set the value of the iframe using the below code:

Parent Page:

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

Child page: 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);
        }

Now, whenever the child page's height increase (ie whenever a new <tr> is included), I will call the parent.setIframeHeight() so that the iframe height is increased. I tested this and works fine for me. I wanted to know whether is it the right way to increase the iframe height? Or is there any other alternative.

Answer 1

try this: If your Child page Content Changes Continuously or after some Intervals:

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";
  }   
 }