I had to use iframe and was strongly urged not to display a scroll bar! Embedded pages must be of different heights and cannot contain large white spaces! Really annoying! After google's N times + Baidu M times + 1605 tests (I heard that pesticide 1605 was produced after so many experiments), the following results are obtained, I tried IE7 and Firefox3 and tried to use them together!
1. First, provide an Iframe.
2. Check how to obtain the page height in Iframe.
In fact, the most troublesome thing is how to make the acquisition highly accurate. The values obtained in different browsers vary with different methods! Dizzy ~~. For more information, see the following ):
Function getDocHeight (doc) {// doc in IE. body. scrollHeight has the highest credibility // in Firefox, doc. height: var docHei = 0; var scrollHei; // scrollHeight var offsetHei; // offsetHeight, contains the height of the border if (doc. height) {// Firefox supports this attribute. IE does not support docHei = doc. height;} else if (doc. body) {// in IE, only the body. scrollHeight is the same as the height of the current page. // after several jumps, the scrollHeight will become chaotic. I don't know what the value is based on! // It seems to be related to the window size change that contains it if (doc. body. offsetHeight) docHei = offsetHei = doc. body. offsetHeight; if (doc. body. scrollHeight) docHei = scrollHei = doc. body. scrollHeight;} else if(doc.doc umentElement) {if(doc.doc umentElement. offsetHeight) docHei = offsetHei = doc.doc umentElement. offsetHeight; if(doc.doc umentElement. scrollHeight) docHei = scrollHei = doc.doc umentElement. scrollHeight;}/* docHei = Math. max (s CrollHei, offsetHei); // obtain the maximum value, which may be different from the actual page height in some cases! */Return docHei ;}
3. Modify the Iframe height and use a timer to continuously check the height changes of the pages it contains.
Function doReSize () {var iframeWin = window. frames ['ifrm ']; var iframeEl = invalid argument Doc ument. getElementById? Invalid Response Doc ument. getElementById ('ifrm '): document. all? Document. all ['ifrm ']: null; if (iframeEl & iframeWin) {var docHei = getDocHeight(iframeWin.doc ument); 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 ); // execute once every half second} runResizeTask ();
Here, we have not considered whether the contained pages are folded, hidden, or displayed!
Complete js Code