[jquery] iframe 객체 접근 후 값 가져오기

iframe 객체 접근 후 값 가져오기

이제는 iframe를 잘 사용하지 않는다. 하지만 프로젝트를 하다보면 iframe을 쓰는 경우가 종종 생긴다.
잘 사용하지 않기에 접근하는데 시간을 잡아먹는 경우가 있기에 작업을 한 코드를 공유한다.

최근 프로젝트는 보통 ajax로 된 JS 라이브러리(프레임워크)를 이용하여 다른 페이지를 불러오고 컨트롤한다.
VueJs, reactJS, AngularJS 등으로 하지만 아직까지도 대다수 대형 프로젝트에서는 jquery를 사용하고 있다.

해당 메소드 과제

iframe의 세로값을 가져와서 iframe를 부르는 페이지의
<iframe> 태그의 세로 값을 적용하여 스크롤이 생기지 않아야 한다.

1. 페이지가 로딩되었을 경우
2. 탭을 선택할 시 탭 영역 안에 있는 경우

과제 해결

1. 메소드의 파라미터값으로 객체($container)를 선택한다.
2. 객체가 비어있을 시 iframe의 가장 첫번째 iframe을 선택자로 한다.
3. iframe이 없을 경우 함수 실행을 정지한다.
4. iframe를 리로드 한다.
5. iframe를 로드 후 컨텐츠에 접근 후 세로값을 가져온다.
6. iframe에 세로값을 넣어준다.

 

 

 

// 실행
Method('iframe');
// 함수
function Method($container){
  if( $container == undefined) {
      $container = $('iframe').eq(0);
  }
  var iframeArea = $($container);
  if(!iframeArea.length){return}

  iframeArea.attr('src', iframeArea.attr('src'));

  iframeArea.on('load', function(){
      var height = $container.contents().height();

      iframeArea.css('height', height)
  });
}