成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

真正解決iframe高度自適應(yīng)問(wèn)題

leone / 599人閱讀

摘要：歡迎指出問(wèn)題或留言加深本文的深度，例如已經(jīng)不需要聲明，但是我解決這個(gè)問(wèn)題不得不改一下，退化到，為什么在中子頁(yè)面和的高度不是由內(nèi)部的內(nèi)容決定的，而是等于父元素的高度

1.前言 
解決iframe高度自適應(yīng)問(wèn)題有兩種方法
1.pym
2.手動(dòng)設(shè)置iframe的高度

本文主要是總結(jié)第二種實(shí)現(xiàn)方式，因?yàn)榈谝环Npym.js插件我沒(méi)用懂

如果使用iframe時(shí)，遇到以下的需求：

iframe的高度始終等于嵌入頁(yè)面內(nèi)容的高度，而不是屏幕的高度

右側(cè)不允許出現(xiàn)兩個(gè)滾動(dòng)條

iframe的高度自適應(yīng)不僅僅是指剛加載進(jìn)來(lái)時(shí)，也有可能嵌入內(nèi)容的高度會(huì)隨點(diǎn)擊變化（如：下拉菜單，左側(cè)導(dǎo)航欄等）

頁(yè)面可能同時(shí)嵌入多個(gè)iframe

2.contentWindow對(duì)象

*需要起個(gè)服務(wù)，不要直接在本地打開(kāi)

這是個(gè)只讀屬性，返回指定的iframe的window對(duì)象

拿到這個(gè)對(duì)象，就可以根據(jù)正常網(wǎng)頁(yè)的方法拿到嵌入（子）網(wǎng)頁(yè)的文檔高度，然后把值附給父頁(yè)面的iframe的height。

function setIframeHeight(iframe) {
    if (iframe) {
        var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
        if (iframeWin.document.body) {
            iframe.height = iframeWin.document.body.scrollHeight;
        }
    }
};

為了監(jiān)測(cè)網(wǎng)頁(yè)高度是否因?yàn)辄c(diǎn)擊了某個(gè)下拉按鈕高度變化，我們建立一個(gè)定時(shí)器任務(wù)，這樣一直監(jiān)視著子網(wǎng)頁(yè)的高度。

 setInterval(function () {
            setIframeHeight($("#iframe")[0])
        }, 200)

頁(yè)面有可能同時(shí)存在多個(gè)iframe

$(".flexiframe").each(function (index) {//iframe公用類(lèi)名：flexiframe
    var that = $(this);
    (function () {
        setInterval(function () {
            setIframeHeight(that[0])
        }, 200)
    })(that)
});

如果此時(shí)，你發(fā)現(xiàn)當(dāng)子頁(yè)面高度變高時(shí)，高度可以自適應(yīng)的變高，但在變低時(shí)，會(huì)發(fā)現(xiàn)父頁(yè)面的高度并沒(méi)有向我們想象的隨著子頁(yè)面降低，導(dǎo)致底部留有大面積空白的問(wèn)題，請(qǐng)繼續(xù)往下看

3.文檔聲明的重要性

將子頁(yè)面的文檔聲明改為就好了


4.demo

父頁(yè)面：a.html






    
    
    
    a



    
    
    
    
    





./flexiframe.js


// 使用前先將子頁(yè)面文檔聲明改為
//
function setIframeHeight(iframe) {
    if (iframe) {
        var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
        if (iframeWin.document.body) {
            iframe.height = iframeWin.document.body.scrollHeight;
        }
    }
};
$(".flexiframe").each(function (index) {
    var that = $(this);
    (function () {
        setInterval(function () {
            setIframeHeight(that[0])
        }, 200)
    })(that)
});


子頁(yè)面b.html，分別注釋兩種聲明方式，點(diǎn)擊變大變小按鈕看一下右側(cè)滾動(dòng)條的變化，（細(xì)節(jié)可以F12看一下iframe種的html和body跟div的高度關(guān)系）






        

                

                        
                

        






5.總結(jié)

1.有時(shí)間還是要了解下html的進(jìn)化歷史。
2.本文flexiframe.js可以直接使用，但是只支持同源下父頁(yè)面可以通過(guò)contentWindow獲取子頁(yè)面的內(nèi)容高度，跨域的下次再說(shuō)。
3.歡迎指出問(wèn)題或留言加深本文的深度，例如html5已經(jīng)不需要聲明DTD，但是我解決這個(gè)問(wèn)題不得不改一下DOCTYPE，退化到html4，為什么在html5中子頁(yè)面html和body的高度不是由內(nèi)部的內(nèi)容決定的，而是等于父元素iframe的高度？
           
               
                                           
                       
                 

            
                     
             
               

                   
 文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

                 
                   
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/94598.html

               

                      
               
              

              

                
相關(guān)文章

                
    
                             
                                                                                                    
  • 
                                                
    
                          
    真正解決iframe高度自適應(yīng)問(wèn)題
    
                                                     
    摘要：歡迎指出問(wèn)題或留言加深本文的深度，例如已經(jīng)不需要聲明，但是我解決這個(gè)問(wèn)題不得不改一下，退化到，為什么在中子頁(yè)面和的高度不是由內(nèi)部的內(nèi)容決定的，而是等于父元素的高度

1.前言
解決iframe高度自適應(yīng)問(wèn)題有兩種方法1.pym2.手動(dòng)設(shè)置iframe的高度
本文主要是總結(jié)第二種實(shí)現(xiàn)方式，因?yàn)榈谝环Npym.js插件我沒(méi)用懂

如果使用iframe時(shí)，遇到以下的需求：

iframe的高度始...
    
                                                   
                          
    
                                
    
                                    littleGrow
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    解決各種情況下的iframe高度自適應(yīng)內(nèi)容
    
                                                     
    摘要：自適應(yīng)高度，其實(shí)就是設(shè)置的高度，使其等于內(nèi)嵌網(wǎng)頁(yè)的高度，從而看不出來(lái)滾動(dòng)條和嵌套痕跡。這個(gè)時(shí)候又有幾種情況了。我們使用下的另一個(gè)頁(yè)面來(lái)做代理，通過(guò)它獲取頁(yè)面的高度，并設(shè)定元素的高度。

JS自適應(yīng)高度，其實(shí)就是設(shè)置iframe的高度，使其等于內(nèi)嵌網(wǎng)頁(yè)的高度，從而看不出來(lái)滾動(dòng)條和嵌套痕跡。對(duì)于用戶(hù)體驗(yàn)和網(wǎng)站美觀起著重要作用。如果內(nèi)容是固定的，那么我們可以通過(guò)CSS來(lái)給它直接定義一個(gè)高度，同...
    
                                                   
                          
    
                                
    
                                    alexnevsky
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    解決各種情況下的iframe高度自適應(yīng)內(nèi)容
    
                                                     
    摘要：自適應(yīng)高度，其實(shí)就是設(shè)置的高度，使其等于內(nèi)嵌網(wǎng)頁(yè)的高度，從而看不出來(lái)滾動(dòng)條和嵌套痕跡。這個(gè)時(shí)候又有幾種情況了。我們使用下的另一個(gè)頁(yè)面來(lái)做代理，通過(guò)它獲取頁(yè)面的高度，并設(shè)定元素的高度。

JS自適應(yīng)高度，其實(shí)就是設(shè)置iframe的高度，使其等于內(nèi)嵌網(wǎng)頁(yè)的高度，從而看不出來(lái)滾動(dòng)條和嵌套痕跡。對(duì)于用戶(hù)體驗(yàn)和網(wǎng)站美觀起著重要作用。如果內(nèi)容是固定的，那么我們可以通過(guò)CSS來(lái)給它直接定義一個(gè)高度，同...
    
                                                   
                          
    
                                
    
                                    Leo_chen
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    解決各種情況下的iframe高度自適應(yīng)內(nèi)容
    
                                                     
    摘要：自適應(yīng)高度，其實(shí)就是設(shè)置的高度，使其等于內(nèi)嵌網(wǎng)頁(yè)的高度，從而看不出來(lái)滾動(dòng)條和嵌套痕跡。這個(gè)時(shí)候又有幾種情況了。我們使用下的另一個(gè)頁(yè)面來(lái)做代理，通過(guò)它獲取頁(yè)面的高度，并設(shè)定元素的高度。

JS自適應(yīng)高度，其實(shí)就是設(shè)置iframe的高度，使其等于內(nèi)嵌網(wǎng)頁(yè)的高度，從而看不出來(lái)滾動(dòng)條和嵌套痕跡。對(duì)于用戶(hù)體驗(yàn)和網(wǎng)站美觀起著重要作用。如果內(nèi)容是固定的，那么我們可以通過(guò)CSS來(lái)給它直接定義一個(gè)高度，同...
    
                                                   
                          
    
                                
    
                                    xialong
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                           
                

              

              
               

                  
                  
發(fā)表評(píng)論

                   
               

              

                

                  
0條評(píng)論
   
                
 
                      

              

           

           

              
 
                

                   
              
  

                  
最新活動(dòng)
 
           
                             
              





                                
              

           

        

      
 
    

    
     

      
    

    
    

    
       
       

         
閱讀需要支付1元查看
  
         
     
       

      
  
    
    














<