북마클릿 만들고 북마크(즐겨찾기)에 올리기(예제 : 브라우저 사이즈 표시)

북마클릿 만들고 북마크(즐겨찾기)에 올리기(예제 : 브라우저 사이즈 표시)

 

자바스크립트를 어느 정도 이해하고 간단한 스크립트를 작성할 수있다면 브라우저에서 원하는 기능을 구현할 수있는 스크립트를 북마크에 저장하고 활용할 수 있습니다. 본 글은 간단한 스크립트를 사용해 열린 브라우저 창의 화면 크기를 표시하는 북마클릿을 만들고 북마크에 올리는 과정을 기술합니다. 제이퀴리 이용은 생략했습니다.

 

 

▶ 북마클릿(bookmarklet)

북마클릿은 URL 주소란에 자바스크립트를 등록해둔 북마크를 말하며 bookmark+applet을 줄여 bookmarklet이라 합니다. 흔히 작은 사이즈를 말하지만 큰 사이즈의 북마클릿도 있습니다.

 

1. 북마클릿 만들기 개요
2. 북마클릿 만들기 실례(브라우저 화면 크기)
3. 북마클릿 북마크 추가 등록
4. 참조 사이트

 

▶ 북마클릿 만들기 개요**

• 북마클릿용 자바스크립트를 만듭니다.
• 스크립트는 열려있는 창의 요소에 지장을 주지않기 위해 익명 자동 호출 function(anonymous self invoking function)형식으로 작성합니다.

      (function () {
             --- 작성된 스크립트 ---
      })()

• 자바스크립트를 압축합니다.
• 압축된 자바스크립트를 uri 문자로 인코딩합니다.(%인코딩)
• 링크 테그 만들어서 북마크로 드래그합니다. 
  
  • <a href="자바스크립트"></a> 링크 태그를 만듭니다.
  • 작성된 링크 태그를 북마크바에 드래그하여 북마크에 추가합니다.
• 또는 수동으로 북마크를 만들고 url 주소란에 작성된 북마클릿 코드를 붙혀놓고 북마크에 추가 등록합니다.

▶ 위의 내용대로 열려 있는 브러우저의 화면 사이즈를 표시하는 북마클릿을 만들어 보겠습니다.

 

 

▶ 브라우저 화면 사이즈 북마클릿 만들기

 

▶1. 화면사이즈 구하는 자바스크립트

var w = window.innerWidth
    || document.documentElement.clientWidth
    || document.body.clientWidth;
var h = window.innerHeight
    || document.documentElement.clientHeight
    || document.body.clientHeight;
alert("inner width: w + " inner height: " + h);

 

▶2. 익명 자동 호출 function(anonymous self invoking function)형식에 맞게 수정합니다. 본 란은 textarea입니다. 다른 스크립트를 원하면 function 내에 스크립트를 입력할 수있습니다.

(function(){ var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; alert("width = " + w + "px || height = " + h + "px")})()

 

▶3. 스크립트를 압축합니다. 위의 압축 버튼은 줄 바꿈 문자와 해당 줄의 앞, 뒤 공백만 제거하는데 확실한 압축을 원하면 min.js 만드는 이 사이트에서 하시고 복사본을 아래에 붙여 놓으세요. 자바스크립트 compress(mi.js)

 

여러 줄로 보이지만 실제는 한 줄입니다.

 

▶4. 압축된 스크립트를 uri 문자로 인코딩 하고 javascript: 문구를 삽입하여 북마클릿용 자바스크립트 코드를 만듭니다.

 

여러 줄로 보이지만 실제는 한 줄입니다.

인코딩 code---here

 

 

▶5. 북마클릿 스크립트로 아래의 링크 코드 주소줄(href)에 넣어 링크코드를 만듭니다.

(1) 단계에 따라 만든 링크코드입니다 .

[ 브라우저 사이즈 링크 ]

 

(2) 한 단계로 만드는 링크코드입니다.

[ 한단계로 만든 브라우저 사이즈 링크 ]

<script>

//자바 스크립트

function makelink() {
   var scode = document.getElementById("rcode").value;
   scode = scode.split(/\r\n|\r|\n/g);
    var i;
    var len = scode.length;
    var c;
    for (i = 0; i < len; i++) {
      c = scode[i].trim();
      scode[i] = c;
    }
 var res = scode.join("");
 res = "javascript:" + encodeURI(res);
 document.getElementById("blink1").setAttribute("href", res);
}

//제이쿼리 스크립트
function makelinkjq () {
 var scode = $("#rcode").val();
    scode = scode.split(/\r\n|\r|\n/g);
    var i;
    var len = scode.length;
    var c;
    for (i = 0; i < len; i++) {
      c = $.trim(scode[i]);
      scode[i] = c;
    }
 var res = scode.join("");
 res = "javascript:" + encodeURI(res);
 $("#blink2").attr("href", res);
}
</script>

 

위의 (1),(2) 중 실행돼서 만들어진 링크코드를 클릭하면 아래와 같이 브라우저 사이즈 창이 나옵니다.

 

위의 링크 코드를 아래의 방법으로 북마크에 올립니다.

 

 

▶ 북마클릿 코드 북마크에 올리기

 

자주 쓰는 북마크로 간주하여 북마크바 또는 즐겨찾기 모음(ie)에 등록하는 것으로 하겠습니다.

• 크롬, 파이어폭스에서 북마크바가 보이지 않으면 설정 메뉴에서 북마크바 표시를 선택합니다.
• ie에서는 상단 메뉴바 여백을 좌클릭하여 나오는 메뉴에서 즐겨찾기 모음을 선택합니다.

▶ 링크 태그를 마우스 좌클릭한 상태로 북마크바로 드래그합니다.(크롬, 파이어폭스, ie)

▶ 링크 태그를 마우스 좌클릭하여 나오는 컨텍스트 메뉴에 따라 북마크에 저장합니다.

• 파이어폭스 

• 링크를 북마크에 추가 : 링크코드를 좌클릭하고 나오는 메뉴에서 링크를 북마크에 추가 선택 후 내용을 확인하고 저장을 합니다.
• 링크 주소 복사 : 링크 주소 복사 후 북마크바 여백을 우클릭 후 새 북마크를 선택 북마크 이름을 변경하고 주소줄에 복사된 링크 주소를 붙혀넣습니다. 또는 붛혀넣기 선택후 표시된 북마크를 우클릭하여 속성에서 북마크 이름을 변경합니다. 

• 크롬: 링크코드를 우클릭한 후 링크 주소 복사를 선택한 후 북마크바 여백을 우클릭하고 붙혀넣기 합니다. 표시된 북마크를 우클릭 수정을 선택하고 북마크 이름을 변경합니다.

• 인터넷익스플로러(ie)

  • 열려 있는 페이지를 상단 매뉴바에서 즐겨 찾기=>즐겨찾기 모음에 추가하면 즐겨찾기모음에 열려 있는 페이지가 저장됩니다.
  • 즐겨찾기 모음에 있는 현재 페이지 항목을 마우스 우클릭한 후 나오는 메뉴에서 속성을 클릭하고 웹문서탭의 URL난에 복사된 바로가기를 붙혀놓고 일반탭에서 이름을 변경하고 확인을 선택합니다.

▶ 모바일 안드로이드에서는 크롬의 경우 북마크된 북마클릿을 주소창에 북마클릿 명을 입력 하고 주소줄 아래 나오는 동명의 검색어를 실행시킵니다.

▶ 아래는 참고한 웹페이지 링크입니다. 내용이 좀 오래된 내용이지만 잘 정리된 것같고 내용 중 북마클릿에 포함하는 Jquery 버전이 낮습니다. 
▶ 여러 페이지에서 쓸만한 북마클릿을 소개하는데 오래돼서 그런지 작동이 잘 안되는 북마클릿이 많이 있네요.

* Bookmarklet Creator with Script Includer 
* Bookmarklet Generator 
* Create Bookmarklets - The Right Way
* Bookmarklet Maker

◆다른 글 보기

• [FastBoot 스킨 데스크탑] 좌측 삼각형 메뉴 버튼 없애고 해당 요소 불러오지 않기
• 윈도우 작업 표시줄에 폴더 고정하기
• 갤럭시 갤러리 사진 동영상 카테고리별 분류 앨범 폴더만들기
• FastBoot 스킨 사이드바 최신 글(recentPost) 썸네일 오류 해결 방법
• FastBoot 스킨 본문 글 목록(List-group: ul, ol) 스타일 조정