How to set the height of iframe based on content in it?

Question

Get and set the iframe based on content in it. By default height is 150px. I tried to get the height using document.documentelement.clientheight,

Answer 1

I think you can create two functions, one in the document where you are creating the iframe and the other in the document that you show in the iframe, example:

Parent Function:

$.fn.setSizeIframe = function(height,width) {

  $(#idIframe).width(width);
  $(#idIframe).height(height);

}

In this function you'll receive two arguments (height and width), those arguments will be passed by the function that invokes the setSizeIframe function, in this case for the function that will be in the child document or in the documneto that you will show in the iframe.

Child Function:

$.fn.mySize = function(){

  let height = $("body").height();
  let width = $("body").width();

  parent.$.fn.setSizeIframe(height,width);

}

This function must be called when the document is ready(Child document).

Answer 2

First you need to get your iframe element. Then set the height of your iframe equal to the body height of the content inside the iframe.

const iframe = document.getElementById('myIframe');

iframe.style.height = iframe.contentWindow.document.body.offsetHeight;