onbeforeprint 속성

정의

beforeprint 이벤트는 브라우저에서 프린트를 시작할 때 발생합니다.

  <script type="text/javascript">
    function doSomething() {
      //프린트를 시작할 때 하고 싶은 것을 지정합니다.
    }
  </script>
</head>
<body onbeforeprint="doSomething()">
  ...
</body>

또는,

  ...
  <script type="text/javascript">
    function doSomething() {
      //프린트를 시작할 때 하고 싶은 것을 지정합니다.
    }

    window.onbeforeprint = doSomething;
  </script>
</body>

와 같이 만듭니다.

발생 가능한 요소

이 이벤트는 window 객체의 메서드입니다.

상세

이 이벤트는 인터넷 익스플로러 5 버전부터 지원했으며, W3C의 HTML 4.01 명세까지는 표준에 등록되지 않았었습니다.

화면에는 표시하지만, 프린트할때는 감추고 싶은 요소가 있을 수 있습니다. 사이트 내비게이션이라든가, 배너 광고 같은 것 말입니다. 반대로, 화면에는 표시할 필요가 없지만 프린트할때는 꼭 필요한 것도 있습니다. 대표적으로 링크 주소입니다.

일반적으로 이러한 것은 CSS의 미디어 쿼리를 이용해서 해결하는 것이 최선입니다. 즉,

@media print {
    nav, div.banner {display:none;}
}

이렇게 하면, nav 요소나 배너광고를 화면에만 보이고 프린트는 안되게 할 수 있습니다.

미디어 쿼리 만으로는 해결할 수 없는 것도 있습니다. 예를 들어 링크 주소를 프린트만 되고 화면에는 나오지 않게 하는건, CSS 2.1 명세로는 해결할 수 없습니다. span 요소를 어뷰징해서 할 수는 있겠지만 올바른 해결은 아닙니다.

beforeprint, afterprint 두 이벤트를 이용하면 내용과 동작, 표현이 뒤엉키지 않게 하면서 문제를 해결할 수 있습니다.

  <a href="http://example1.com" class="print">...</a>
  <a href="http://example2.com">...</a>
  ...

  <script src="jquery-1.4.4.min.js" type="text/javascript"><script>
  <script type="text/javascript">
    $(function () {
        if (window.onbeforeprint !== undefined) {
            window.onbeforeprint = ShowLinks;
            window.onafterprint = HideLinks;
        }
    });

    function ShowLinks() {
        $("a.print").each(function () {
            $(this).data("linkText" , $(this).text());
            $(this).append(" (" + $(this).attr("href" ) + ")");
        });
    }

    function HideLinks() {
        $("a.print").each(function () {
            $(this).text($(this).data("linkText"));
        });
    }
  </script>
</body>

ShowLinks 함수는, 클래스가 “print”인 모든 a 요소를 찾아서, 요소의 내용에 ” (링크 주소)“를 덧붙입니다. 그리고 원래의 내용은 linkText라는 임시 속성에 저장해 둡니다.

HideLinks 함수는, 클래스가 “print”인 모든 a 요소를 찾아서 linkText라는 임시 속성의 내용, 즉 하드코딩된 원래 내용으로 현재 내용을 덮어씁니다. 간단히 말해, 요소의 내용에서 ” (링크 주소)“를 없앱니다.

이러한 동작을 프린트 전후에 해 주면, 사용자가 보는 화면에는 전혀 바뀌는 것이 없고 링크 주소만 프린트되게 할 수 있습니다.

메모

CSS3의 :after 가상요소를 이용하면 자바스크립트 없이 할 수 있습니다. 간단히 쓰면:

a.print:after {content: " (" attr(href) ") ";}

이런 형태입니다. 익스플로러 8 이하 버전을 지원할 필요가 없다면 이렇게 하는 것이 훨씬 낫겠지요.

참조

기준 명세를 바탕으로 명세 번역과 레퍼런스 제작이 이루어졌습니다. 최근 내용은 최신 명세를 확인해 주세요.

 
html5/event/onbeforeprint.txt · 마지막 수정: 2013/11/19 13:35 (외부 편집기)
이 레퍼런스는 클리어보스가 제작/운영하고 있으며, 다음의 라이센스를 따릅니다 :CC 저작자표시-비영리-동일조건변경허락 2.0
Recent changes RSS feed World Wide Web Consortium Driven by DokuWiki