Iframe adaptive height and real-time monitoring of height changes js code_javascript skills

Google N times and Baidu M times After testing 1605 times (I heard that pesticide 1605 came out after so many experiments), the following results were obtained. I tried it in IE7 and Firefox3 and it still works!
1. First give an Iframe.

Copy code The code is as follows:

2. Then see how to get the height of the page in the Iframe.
In fact, the most troublesome thing is how to make the acquisition highly accurate. The values ​​obtained in different methods and different browsers will be different! Dizzy~~. After referring to many opinions, we came up with the following javascript function (the doc parameter is the window.document object):

Copy code The code is as follows:

function getDocHeight(doc)
{
//In IE, doc.body.scrollHeight has the highest credibility
//In Firefox, doc.height is sufficient
var docHei = 0;
var scrollHei;//scrollHeight
var offsetHei;//offsetHeight, including the height of the border
if (doc.height)
{
//Firefox Support this attribute, IE does not support
docHei = doc.height;
}
else if (doc.body)
{
//In IE, only body.scrollHeight is related to the current The height of the page is consistent.
//Others will become confusing after a few jumps. I don’t know what the value is based on!
//It seems to be related to the size change of the window containing it
if(doc.body.offsetHeight) docHei = offsetHei = doc.body.offsetHeight;
if(doc.body.scrollHeight) docHei = scrollHei = doc.body.scrollHeight;
}
else if(doc.documentElement)
{
if(doc.documentElement.offsetHeight) docHei = offsetHei = doc.documentElement.offsetHeight;
if (doc.documentElement.scrollHeight) docHei = scrollHei = doc.documentElement.scrollHeight;
}
/*
docHei = Math.max(scrollHei,offsetHei);//Take the maximum value, in some cases The height below may not match the actual page height!
*/
return docHei;
}

3. Finally modify the height of the Iframe and use a timer to continuously check the height changes of the pages it contains.

Copy code The code is as follows:

function doReSize()
{
var iframeWin = window.frames['ifrm'];
var iframeEl = window.document.getElementById? window.document.getElementById('ifrm'): document.all? document.all['ifrm']: null;
if ( iframeEl && iframeWin )
{
var docHei = getDocHeight(iframeWin.document);
if (docHei != iframeEl.style.height) iframeEl.style.height = docHei 'px';
}
else if(iframeEl)
{
var docHei = getDocHeight(iframeEl.contentDocument);
if (docHei != iframeEl.style.height) iframeEl.style.height = docHei 'px';
}
}
function runResizeTask()
{
doReSize();
setTimeout("runResizeTask()",500);//Every half second Execute once
}
runResizeTask();

There is no need to consider whether the included page is folded, hidden/shown!
Complete js code

Copy code The code is as follows: