즐겨찾기 크로스 브라우징

즐겨찾기 크로스 브라우징

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

브라우저 지원사항

• 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; }); });