즐겨찾기(Bookmark) 버튼 크로스브라우징 > 정보공유

즐겨찾기 크로스 브라우징

북마크(즐겨찾기로 알려진)는 웹페이지를 브라우저에 저장해두고 바로가기하는 기능입니다.

필요에 따라 사용자가 언제든지 페이지를 즐겨찾기에 추가할 수 있지만, 이를 구현하는 동작을 웹페이지에 추가하는 디자인이 국내에서는 꽤 자주 사용됩니다.

[브라우저 지원사항]

- IE 모든 브라우저 지원

- Chrome 단축키 알림을 띄움

- Opera 단축키 알림을 띄움

- Firefox 지원

- Safari 테스트 못해봄

[HTML 구조]

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

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

[자바스크립트]

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

<script>
$(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;
    });
});
</script>