加载内部内容后调整'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'

回答

相关问题