Use jQuery to solve the problem of iframe adaptive height without judging the browser height_jquery

Here are two super simple methods. You don’t need to write anything to determine the browser height and width.

Just choose one of the two methods below. One is placed on the same page as the iframe, and the other is placed on the test.html page.

Be careful not to put it in the wrong place.
In the iframe code, be careful to write the ID. If there is no ID, it cannot be found

Copy code The code is as follows:

Method 1:

Copy code The code is as follows:

//Note: The following code is placed on the same page as the iframe and called
$("#main").load(function(){
var mainheight = $(this).contents().find("body").height() 30;
$(this).height(mainheight);
});

Method 2:

Copy code The code is as follows:

//Note: The following code is placed in test.html to call
$(window.parent.document).find("#main").load(function(){
var main = $(window.parent.document).find("#main");
var thisheight = $(document).height() 30;
main.height(thisheight);
});

In the process of working on the project, you need to use iframe, but iframe has a height by default. Content that exceeds the default height will be hidden, and content that is smaller than the default height will use the default height as the height of the content. In the process of searching for answers, I found out how to control iframe height adaption

iframe adaptive height itself is a very simple method, which is to recalculate the height after the page is loaded.

The code is as follows:

Copy code The code is as follows:

//Public method: Set the height of the iframe to ensure that all data is displayed
//function SetPageHeight() {
// var iframe = getUrlParam('ifname');
// var myiframe = window.parent.document.getElementById(iframe);
// iframeLoaded(myiframe);
//}
var iframeLoaded = function (iframe) {
If (iframe.src.length > 0) {
If (!iframe.readyState || iframe.readyState == "complete") {
            var bHeight =
              iframe.contentWindow.document.body.scrollHeight;
            var dHeight =
iframe.contentWindow.document.documentElement.scrollHeight;
          var height = Math.max(bHeight, dHeight);
iframe.height = height;
}
}
}
//Reset iframe height during paging; after modification: iframe.name = iframe.id
var reSetIframeHeight = function()
{
Try {
      var oIframe = parent.document.getElementById(window.name);
        oIframe.height = 100;
iframeLoaded(oIframe);
}
​​catch (err)
{
         try {
             parent.document.getElementById(window.name).height = 1000;
               } catch (err2) { }
}
}

Call reSetIframeHeight(); method.