加載內部內容後調整'iframe'

我有一個iFrame，其中我加載了一個頁面，使用Ajax來加載數據後點擊不同的頁面標籤。現在我使用JavaScript函數來計算加載數據高度替換iframe的高度，導致調整大小的iframe，從而避免滾動條。現在我的問題是腳本被調用一旦標籤被點擊。但數據仍然是loading.kindly告訴我的東西，我可以用來等待，直到ajax完成加載數據，然後調用我的功能。加載內部內容後調整'iframe'

我使用下面的腳本

function resizeFrame() { 
    var body = document.body, 
    html = document.documentElement; 
    var iFrame = parent.document.getElementById("iframe1");//get id of iframe from parent 
    var nHeight=0; 
    var iframeWin = iFrame.contentWindow.document.body ; 
    nHeight = iframeWin.scrollHeight; 
    iFrame.style.height = nHeight+'px'; //set the frame height to correspond to the content 
}

和我的HTML是如下::

<iframe src="" id="iframe1" name="iframe1" scrolling="no" frameborder="0" onload="$(document).ready(function(){resizeFrame();});" style="width:960px;height:570px">

上面的代碼工作正常，我（IFRAME/src網址都是）我也想獲得iframe內容窗口頁面中div元素的高度。我該如何抓取？

來源

2012-04-05 Ankur

HTML

<iframe id="containter-frame" 
     src="<url of the page>" 
     frameborder="0" 
     min-height="600px" 
     width="100%"> 
</iframe>

的javascript/jquery的：

$(document).ready(function(){ 

    var frame = $('iframe#containter-frame'); 

    //hide document default scroll-bar 
    document.body.style.overflow = 'hidden'; 


    frame.load(resizeIframe); //wait for the frame to load 
    $(window).resize(resizeIframe); 

    function resizeIframe() { 
     var w, h;  

     //detect browser dimensions 
      if($.browser.mozilla){ 
      h = $(window).height(); 
      w = $(window).width();     
     }else{ 
      h = $(document).height(); 
      w = $(document).width(); 
     } 

     //set new dimensions for the iframe 
      frame.height(h); 
     frame.width(w); 
    } 
});

這裏的竅門是frame.load方法等待幀加載。之後，根據需要操縱高度和寬度。這裏我的設置是覆蓋整個屏幕。該頁面只包含一個iframe，沒有別的。

親切的問候。

來源

2012-04-05 12:14:55 Saurabh

讓我試試這個one.Thanks。 :) – Ankur 2012-04-06 05:47:27

如果你不感興趣的窗口的整個寬度，你可以得到它的適應內容

var frame = $('iframe#modal-body'); 

frame.load(resizeIframe); 
function resizeIframe() { 
    frame.height(frame.contents().height()); 
    frame.height(frame.contents().height()); 
}

來源

2013-04-27 03:47:59 stabbie

加載內部內容後調整'iframe'

回答

相關問題