Multiple IFRAME adaptive height sharing a scroll bar

Source: Internet
Author: User
I have two iframe on a page, these two are tied, one on the left to display the person's data, a cell on the right side of the data, if the referenced page data is too large, it will be truncated, but set scrolling= "Auto", double will appear two scroll bar. Check the code on the Internet, there are probably two ways to achieve


method one. The referenced page is the static height of the JS code

Gets the static height of the contained page to set the height  
    function setfirstiframeheight (value) {  
    if (value== "person") of the IFRAME {  
         var Personheight = JQuery (' #person '). Contents (). Find ("meta"). attr ("content");    
         JQuery (' #person '). Height (personheight);  
     else if (value== "cell") {  
         var cellheight = jQuery (' #cell '). Contents (). Find ("meta"). attr ("content");    
         JQuery (' #cell '). Height (cellheight);  
      }      
      


Main Page code
<table class= "Result" width= "100%" cellpadding= "0" cellspacing= "0" >  
            <tr>  
                <td width= "49%" >  
                    <iframe name= "person" id= "person" frameborder= "0" onload= "  
                setfirstiframeheight" (' Person ') "scrolling=" No "width=" 100% "height=" >  
                        </iframe>  
                </td>  
                <td width= "2%" > </td>  
                <TD width= "49%" >  
                    <iframe name= "cell" id= "cell" frameborder= "0"   
            onload= "Setfirstiframeheight (' Cell ') "scrolling=" no "width=" 100% "height=" >  
                        </iframe>  
                </td>  
            </tr>  
</table>  


To be included in the referenced page:
<meta content= "text/html; Charset=utf-8; 750px "/>  


The realization principle is that when the main page of the IFRAME in the load, call the onload inside the JS code, get the height of the introduced page, and the height of the value assigned to the IFRAME, so that when the height of the introduced page exceeds the height of the IFRAME, The scroll bar will appear outside the two iframe.

However, this method does not get the height value of the child page with unknown heights, and when the introduced page height cannot be represented by CONTENT:XXXPX, this method does not apply, and a second method appears.


method Two, use interval to realize

<table class= "Result" width= "100%" cellpadding= "0" cellspacing= "0" > <tr> <td width= "49%" > <iframe name= "person" id= "person" frameborder= "0" scrolling= "no" width= "100%" height= "onload=" This.height=this.contentwindow.document.documentelement.scrollheight "> <script type=" text/javascript ">//Dynamically get the height function of the referenced page reinitIframe1 () {var iframe = document      
                . getElementById ("person");       
                    try{var bheight = iframe.contentWindow.document.body.scrollHeight;       
                    var dheight = iframe.contentWindow.document.documentElement.scrollHeight;       
                    var height = Math.max (bheight, dheight);       
                Iframe.height = height;   
            }catch (ex) {}} window.setinterval ("ReinitIframe1 ()", 200); </script> </iframe> </td> <td width= "2%" > </td> & LT;TD width= "49%" > <iframe name= "cell" id= "cell" frameborder= "0" scrolling= "no" width= "100%" Hei   
                    ght= "onload=" "This.height=this.contentwindow.document.documentelement.scrollheight" > <script type= "Text/javascript" >//Dynamically get the height of the referenced page functi      
                        On reinitIframe2 () {var iframe = document.getElementById ("cell");       
                            try{var bheight = iframe.contentWindow.document.body.scrollHeight;       
                            var dheight = iframe.contentWindow.document.documentElement.scrollHeight;       
                            var height = Math.max (bheight, dheight);       
                        Iframe.height = height; }catch (ex)   
                    {}} window.setinterval ("ReinitIframe2 ()", 200);    </script> </iframe> </td> </tr> </table>


Turn from: http://zengyouyuan.iteye.com/blog/760569

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.