개발 Q&A

제목 2일째 헤딩중이네요 iframe에서...
글쓴이 CI_ORL 작성시각 2014/10/08 20:35:58
댓글 : 6 추천 : 0 스크랩 : 0 조회수 : 18145   RSS
iframe 높이값 리사이징하는게 질문입니다... 온로드시킬때 리사이징이 되고 있습니다 문제는 자식창에 탭이 존재하는데 이 탭을 선택하게 되면 리사이징이 안된다는것... 온클릭으로 parent.함수명 호출하면 현재 페이지의 사이즈로 마춰질 뿐... 해당탭의 사이즈로 변경이 안되네요 도와주세요 흑
 다음글 다음 에디터를 사용하려고 합니다. 첨부파일에 대한 질문... (3)
 이전글 테이블 출력 질문 드립니다. (3)

댓글

darkninja / 2014/10/10 00:14:46 / 추천 0
소스 좀 올려 주세요!
iframe 학습중인데 좀  배워보게요
답하는거도 맨땅에 헤딩하라는 건가요? ㅋㅋㅋ
CI_ORL / 2014/10/10 09:56:20 / 추천 0
a.php // 아이프레임에 자식창

tab-1 내용....90줄
tab-2 내용... 200줄
b.php // 부모창 이라 지칭할때 첫 탭은 인식 잘합니다.
2번 탭의 경우가 문제 인데... 2번탭을 2번 눌러야 정상 작동하는 이상한 일이 생기네요...(이중스크롤 없애는 일이...)
CI_ORL / 2014/10/10 10:08:04 / 추천 0
코드가... 변형 되었네;;a

아래 링크 보시면... 결과 보기 클릭시 스크롤이 생기는데...

첫 클릭에서 그 스크롤을 1개만 보이게 하고 싶다는 거죠...(여러번 클릭하게 되면... 일반적으로 2번 클릭하면... 스크롤 사라짐...)

http://tix112.dothome.co.kr/2.php
 
darkninja / 2014/10/11 03:48:42 / 추천 0
앞으로 쓸데 없는 호기심은 자제해야 할듯...
http://stackoverflow.com/questions/13010315/how-to-trigger-a-javascript-function-after-bootstrap-collapse-plugin-transiti
ie8 에서는 정확한 높이가 계산이 안됩니다.
firefox 에서는 제대로보이다가 ie8 과 같은 증상이 나타나기도 합니다.
한번더 찾아 보시고 안되면 방법을 바꾸셔야 겠네요!

iframe 말고 다른 방법을 사용하시던지
부트스트랩을 사용하지 않고 다른 방법을 사용하시던지 ...
아 잘된다고 글쓰러 왔다가 낙심천만 하고 갑니다. ㅋㅋ
 
main.php

  <iframe src="<?php echo ROOT_PATH; ?>/iframe_include/iframetab.php" id="IframeId" name="IframeId" scrolling="no" width="100%"></iframe>

iframetab.php
...
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                    결과보기
                  </a>
                </h4>
              </div>
              <div id="collapseTwo" class="panel-collapse collapse">
...
  <script type="text/javascript">
    var docHeight = 0;
    function resizeIframe() {
      if (typeof document.height != 'undefined') {
        docHeight = document.height;
      }
      else if (document.compatMode && document.compatMode != 'BackCompat') {
        docHeight = document.documentElement.scrollHeight;
      }
      else if (document.body && typeof document.body.scrollHeight != 'undefined') {
        docHeight = document.body.scrollHeight;
      }
      // magic number: suppress generation of scrollbars...
      //docHeight += 20;
      parent.document.getElementById('IframeId').style.height = docHeight + "px";    
    }
    parent.document.getElementById('IframeId').onload = resizeIframe;
    parent.window.onresize = resizeIframe;
    
    $('#collapseOne').on("hidden.bs.collapse", function(){
      //trigger content change
      //this code will be triggered when the collapse transition is completed 
      //that is your myCollapsible element will have 'in' in your class
      resizeIframe();
      //alert(docHeight);
    });
  </script>  

darkninja / 2014/10/11 14:00:14 / 추천 0
조건을 잘못 주었습니다.
아래와 같이 하시면 됩니다.
    $('#collapseTwo').on("shown.bs.collapse", function(){
      //trigger content change
      //this code will be triggered when the collapse transition is completed 
      //that is your myCollapsible element will have 'in' in your class
      resizeIframe();
      //alert(docHeight);
    });
CI_ORL / 2014/10/14 18:06:04 / 추천 0
darkninja //

헐... 여기에다 올려 놓고... 완벽하진 않지만, 해결하였는데... 이제서야 확인 했습니다...
전 자식창이 온로드 되었을때, 각 높이를 계산하여, 가장 높은 녀석값으로 높이를 늘리는 변칙을 쓰긴 했습죠...

다만, 높이값이 자동으로 움직이지 않는다는 점(IE만 이상하게 자동으로 높이값 조절 됨) 과 높이가 가장 작은 녀석의 경우
푸더가 쩌~~쪼 아래 있다는 점을 제외하면, 그냥 그럭저럭 쓰고 있습니다.

크롬 / IE 말곤 테스트 안해봐서 ㅎㅎ 다른건 모르겠구요