Iframe self-adaptive height and real-time monitoring of highly changed js Code

Source: Internet
Author: User
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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.