jquery bgiframe 정리

■ 아래와 같이 크롬에서는 문제가 없지만 인터넷 익스플로러 브라우저를 사용할 때 PDF파일이 iframe으로 include되어있고 그 위로 레이어가 있을 경우 그 레이어가 PDF 파일뒤로 가려지게 된다. 이를 해결하기 위해 jquery bgiframe 플러그인이 있어 정리한다.
bgiframe1

 

■ bgiframe 위치
– https://github.com/brandonaaron/bgiframe에서 최신 파일을 다운로드 받는다.(jquery.bgiframe.js)

■ bgiframe 사용법
– jquery 플러그인이므로 jquery와 bgiframe을 include한다.

<script type="text/javascript" src="./jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="./jquery.bgiframe.js"></script>

– 아래의 코드는 IE에서 위의 그림처럼 menu레이어가 pdf 플러그인에 의해 가려 지게 된다.

<h1>jQuery bgiframe - Visual Test</h1>

<div id="title" class="box">title</div>
<div id="menu" class="box" style="display:none;">
  <a href="javascript:alert('menu1')">menu1</a><br/>
  <a href="javascript:alert('menu2')">menu2</a><br/>
  <a href="javascript:alert('menu3')">menu3</a><br/>
</div>

<iframe id="pdf" src="./sample.pdf" width="500" height="200"></iframe>

– 가려지는 menu레이어를 다시 보여주기 위해서는 아래와 같이 보여져야할 때 bgiframe() 함수를 호출하면 된다. 내부적으로 menu레이어와 pdf 플러그인 사이에 빈 iframe를 하나 생성해주는 듯하다. 전체 테스트 코드를 첨부한다. bgiframe 테스트코드 다운로드

$("#title").hover(
    function () {
        console.log("mouse hover...");
        $("#menu").show();
        $('#menu').bgiframe();
      },
      function () {
          console.log("mouse out...");
        $("#menu").hide();
      }
);

$("#menu").hover(
    function () {
        console.log("mouse hover...");
        $("#menu").show();
        $('#menu').bgiframe();
      },
      function () {
          console.log("mouse out...");
        $("#menu").hide();
      }
);

 

■ bgiframe 적용화면
bgiframe2

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다