Summary of various methods for iframe adaptive height_Experience exchange

Because the iframe without borders can be seamlessly integrated with the web page, it is possible to update some data of the page without refreshing the page. However, the size of the iframe is not as "scalable" as the layer, so it brings problems in use. Trouble, too much is not good when setting the height of iframe, and less is even worse. Now, let me tell you a way to dynamically adjust the height of iframe, mainly the following JS function:
First This method: The code is simple and the compatibility is okay. You can test it first.

Copy code The code is as follows:

function SetWinHeight(obj)
{
var win=obj;
if (document.getElementById)
{
if (win && !window.opera)
{
if (win.contentDocument && win. contentDocument.body.offsetHeight)
win.height = win.contentDocument.body.offsetHeight;
else if(win.Document && win.Document.body.scrollHeight)
win.height = win.Document. body.scrollHeight;
}
}
}

Finally, when adding an iframe, you cannot lose the onload attribute. Of course, the id must also match win in the function
>

Copy the code The code is as follows:

This kind of code is similar to the above solution
The classic code iFrame adaptive height has passed the test in IE6/IE7/IE8/Firefox/Opera/Chrome/Safari.
HTML code:

Copy code The code is as follows:

Javascript Code:

The following one is more compatible

Copy code Code As follows:

Another iframe solution (super simple)
Important tip: The web address you must fill in in src= must be on the same site as this page Otherwise, you will get an error and say "Access Denied!" (Actually, this is access denied due to cross-domain issues in Js)
I have encountered this problem before. I searched online to get the answer and found that Many people have also encountered this problem, so I will share the solution now
1. Create a bottom.js file, and then enter the following code (only two lines)

Copy code The code is as follows:

parent.document.all("Frame ID name").style.height=document. body.scrollHeight;
parent.document.all("frame ID name").style.width=document.body.scrollWidth;

The frame ID name here is the ID of the Iframe. For example:

Copy code The code is as follows:

2. Give you all the included files in the website Add

Copy code The code is as follows:

div>
3. OK, call it a day!
Passed the test under WINXP and IE6. It's very simple!
Implement the adaptive height of iframe
Implement the adaptive height of iframe, which can automatically adapt with the length of the page to avoid the phenomenon of scroll bars appearing on the page and iframe at the same time.

Copy code The code is as follows:

The third method is batch iframe adaptation:
At work, I encountered the problem of iframe adaptive height according to the content contained in it. I have seen solutions to similar problems on the Internet before, so I After searching, I found a relatively complete solution that is compatible with browsers, so I don't have to write it myself.
Although you don’t have to write it yourself, the idea still needs to be understood. Basically, it is to obtain the height of the content in the document specified by the iframe attribute src, and then use it to set the height of the iframe itself. When the page where the iframe is located is loaded, the height of the page is changed. All iframes that require adaptive height are automatically set, saving time and effort. If it is determined that all iframes in the page require adaptive height, directly obtain the iframe array and give it to the code. You don’t even need to write the ID yourself, and the program is completed. (Post the code:)

Copy code The code is as follows:

Someone on the Internet has improved the method to solve the problem of automatically adjusting the height of the iframe when the height of the document contained in the iframe changes dynamically. The principle is to continuously scan the content height of the document contained in the iframe and change it on the page where the iframe is located. The height of the iframe itself. This method seems to solve the problem, but it is difficult to say whether it will have an impact on page speed and system resource usage. I feel that the method is a bit paranoid, and there should be a better solution.
The fourth method, calling only for the known iframe ID is not recommended

Copy code The code is as follows:

function iframeAutoFit(iframeObj){
setTimeout(function(){if(!iframeObj) return;iframeObj.height=(iframeObj.Document?iframeObj.Document.body .scrollHeight:iframeObj.contentDocument.body.offsetHeight);},200)
}

How to use it, add an id to the iframe that needs to be adapted, and then execute js That's it