2012-04-05 5 views
1

저는 iFrame을 사용하여 다양한 페이지 레이블을 클릭 한 후 데이터를로드하는 데 아약스를 사용하는 페이지를로드하고 있습니다. 자바 스크립트 함수를 사용하여로드 된 데이터 높이를 계산하여 교체 할 수 있습니다. iframe의 크기가 iframe의 크기를 조정하여 스크롤바가 생기지 않도록합니다. 이제 내 문제는 라벨을 클릭하자마자 스크립트가 호출된다는 것입니다. 데이터는 여전히로드 중입니다. 아약스가 데이터로드를 마친 후 호출 할 때까지 기다릴 수있는 뭔가를 말해주십시오. 내 기능.내용이로드 된 후 '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 
} 

을 이용하고 있고 다음과 같은 :

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

위의 코드 나 (모두가 iframe을/SRC URL에 대해 잘 작동 내 HTML입니다) 또한 iframe 콘텐츠 창 페이지에있는 div 요소의 높이를 가져오고 싶습니다. 어떻게 잡을 수 있습니까?

답변

1

HTML

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

스크립트/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 만 포함되며 다른 페이지는 포함되지 않습니다.

종류 감사합니다. 당신은 윈도우의 전체 폭에 관심이 있다면

+0

날이 스럽다고을 해보자 컨텐츠를 맞게 얻을 수 있습니다. :) – Ankur

1

, 당신은 그냥

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

frame.load(resizeIframe); 
function resizeIframe() { 
    frame.height(frame.contents().height()); 
    frame.height(frame.contents().height()); 
} 
관련 문제