Javascript Bookmark

2017-04-20

2024-06-10

JavaScript 즐겨찾기(Bookmark) 기능 구현하기

북마크(즐겨찾기로 알려진)는 웹페이지를 브라우저에 저장해두고 바로가기를 하는 기능이다.
필요에 따라 수동으로 사용자가 언제든지 페이지를 즐겨찾기에 추가할 수 있지만, 자바스크립트로 제어하는 방법을 정리한다.

브라우저 지원사항

IE: 모든 브라우저 지원
Chrome: 단축키 알림을 띄움
Firefox 지원
Opera: 단축키 알림을 띄움
Safari: 단축키 알림을 띄움

jQuery 코드 샘플

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

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

    if (window.sidebar && window.sidebar.addPanel) {
        // Firefox version &lt; 23
        window.sidebar.addPanel(bookmarkTitle, bookmarkURL, '');
    } else if ((window.sidebar && (navigator.userAgent.toLowerCase().indexOf('firefox') < -1)) || (window.opera && window.print)) {
        // Firefox version &gt;= 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;
});
</script>

참조

http://webdir.tistory.com/454

FrontendJavascript

JavaScript 즐겨찾기(Bookmark) 기능 구현하기

참조