즐겨찾기(Bookmark) 버튼 크로스브라우징

즐겨찾기 버튼을 평소에는 잘 추가하지 않는 편입니다만, 요청에 의해 구현된 모델을 찾아보니 역시나 브라우저별로 다른 접근방법이 필요했습니다. 국내 검색 결과들에서는 오래전에 작성된 자료들이라 최근에 사용하기에 부적합해 관련된 사항을 정리해서 공유합니다.

즐겨찾기 크로스 브라우징

북마크(즐겨찾기로 알려진)는 웹페이지를 브라우저에 저장해두고 바로가기하는 기능이다. 필요에 따라 사용자가 언제든지 페이지를 즐겨찾기에 추가할 수 있지만, 이를 구현하는 동작을 웹페이지에 추가하는 디자인이 국내에서는 꽤 자주 사용된다.

브라우저 지원사항

• IE 모든 브라우저 지원
• Chrome 단축키 알림을 띄움
• Opera 단축키 알림을 띄움
• Firefox 지원
• Safari 테스트 못해봄

HTML 구조

즐겨찾기 버튼을 원하는 페이지에 삽입한다.

<a href="#" id="favorite" title="즐겨찾기 등록">즐겨찾기</a>

자바스크립트

jQuery를 이용해 아래와 같이 구성된다. 이를 순수 자바스크립트 함수로 만들어 사용해도 된다.

$(document).ready(function() {
    $('#favorite').on('click', function(e) {
        var bookmarkURL = window.location.href;
        var bookmarkTitle = document.title;
        var triggerDefault = false;

        if (window.sidebar && window.sidebar.addPanel) {
            // Firefox version < 23
            window.sidebar.addPanel(bookmarkTitle, bookmarkURL, '');
        } else if ((window.sidebar && (navigator.userAgent.toLowerCase().indexOf('firefox') > -1)) || (window.opera && window.print)) {
            // Firefox version >= 23 and Opera Hotlist
            var $this = $(this);
            $this.attr('href', bookmarkURL);
            $this.attr('title', bookmarkTitle);
            $this.attr('rel', 'sidebar');
            $this.off(e);
            triggerDefault = true;
        } else if (window.external && ('AddFavorite' in window.external)) {
            // IE Favorite
            window.external.AddFavorite(bookmarkURL, bookmarkTitle);
        } else {
            // WebKit - Safari/Chrome
            alert((navigator.userAgent.toLowerCase().indexOf('mac') != -1 ? 'Cmd' : 'Ctrl') + '+D 키를 눌러 즐겨찾기에 등록하실 수 있습니다.');
        }

        return triggerDefault;
    });
});

See the Pen bookmark by Douglas Ham (@uzugoer) on CodePen.

이 코드는 How to Add a Cross-Browser "Add to Favorites" (Bookmark) button to Your Website에 소개된 내용이다.