Use javascript to achieve Iframe adaptive height

  • 2020-05-09 18:09:02
  • OfStack

Method 1:


$(window.parent.document).find("#ContentIframe").load(function() {
                    var main = $(window.parent.document).find("#ContentIframe");
                    var thisheight = $(document).height();
                    if (thisheight < 800)
                        thisheight = 800;
                    main.height(thisheight);
                });

This way of writing can only be used for the adaptive height of the inherent element when loading. When the element changes (such as adding a lot of elements, the height changes), the iframe height of the parent form cannot be changed in time.

Method 2:


function setMainHeight() {     var main = $(window.parent.document).find("#ContentIframe");
    var thisheight = $("body").height();
    if (thisheight < 800) { thisheight = 800; }
    main.height(thisheight+50);
   
    setTimeout(setMainHeight, 2000);
}

Add a timer that polls to determine the height change of the child page.

Both of the above can be highly adaptive by iframe, which you can choose freely according to your own project requirements


Related articles: