자바 스크립트를 이용한 아이폰 사파리의 책갈피 활용법

아이폰의 사파리의 기능 중 책갈피라는 기능이 있습니다. 이것은 인터넷 익스플로러(Internet Explorer)의 즐겨찾기와 같은 역할을 하는 기능인데요. 

책갈피에 저장된 웹페이지 주소를 자바 스크립트로 수정하면, 사파리의 책갈피를 보다 편리하게 사용할 수 있는 다양한 기능들로 활용할 수 있습니다. 자바 스크립트로 사용할 수 있는 아이폰 사파리의 책갈피 기능들은 아래와 같습니다. 

1. 웹페이지 내 검색

2. 웹페이지 맨 밑으로 내리기

3. 마이크로소프트 번역기를 이용한 영↔한 번역

4. 구글 번역기를 이용한 영↔한 번역

5. 카톡으로 웹페이지 링크 보내기

6. 마이피플로 웹페이지 링크 보내기

7. 모바일 웹페이지 화면 확대/축소 

그럼 지금부터 위 기능들을 이용할 수 있게 해주는 자바스크립트와 책갈피 웹페이지 수정 방법에 대해 알아보겠습니다.

#. 자바 스크립트를 이용한 아이폰 사파리의 책갈피 활용법

STEP1. 사파리를 실행시켜 아무 페이지나 화면 하단 중앙 버튼을 눌러 책갈피에 저장합니다.

STEP2. 화면 하단의 메뉴 버튼 중 왼쪽에서 4번째 버튼을 눌러 방금 저장한 책갈피를 편집합니다. 

STEP3. 편집화면의 첫번째 줄은 책갈피의 이름이고, 두번째 줄은 웹페이지 주소인데요. 

첫번째 줄은 자신이 사용할 문구로 수정하고 두번째 줄은 아래 그림처럼 아래의 자바 스크립트 내용을 복사해 붙이기를 한 다음 저장하면 됩니다.

1. 웹페이지 내 검색 자바 스크립트

javascript:void%28s%3Dprompt%28%27Find%20text%3A%27%2C%27%27%29%29%3Bs%3D%27%28%27+s+%27%29%27%3Bx%3Dnew%20RegExp%28s%2C%27gi%27%29%3Brn%3DMath.floor%28Math.random%28%29*100%29%3Brid%3D%27z%27%20+%20rn%3Bb%20%3D%20document.body.innerHTML%3Bb%3Db.replace%28x%2C%27%3Cspan%20name%3D%27%20+%20rid%20+%20%27%20id%3D%27%20+%20rid%20+%20%27%20style%3D%5C%27color%3A%23000%3Bbackground-color%3Ayellow%3B%20font-weight%3Abold%3B%5C%27%3E%241%3C/span%3E%27%29%3Bvoid%28document.body.innerHTML%3Db%29%3Balert%28%27Found%20%27%20+%20document.getElementsByName%28rid%29.length%20+%20%27%20matches.%27%29%3Bwindow.scrollTo%280%2Cdocument.getElementsByName%28rid%29%5B0%5D.offsetTop%29%3B

2. 웹페이지 맨 밑으로 내리기 자바 스크립트

javascript:window.scrollBy(0,document.height)

3. 마이크로소프트 번역기를 이용한 영↔한 번역 자바 스크립트

javascript:(function(){var%20s%20=%20document.createElement('script');%20s.type%20=%20'text/javascript';%20s.src%20=%20'http://labs.microsofttranslator.com/bookmarklet/default.aspx?f=js&to=ko';%20document.body.insertBefore(s,%20document.body.firstChild);})()

4. 구글 번역기를 이용한 영↔한 번역 자바 스크립트

javascript:location.href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=%s&hl=KO&ie=UTF-8&oe=UTF-8&prev=%2Flanguage_tools'

5. 카톡으로 웹페이지 링크 보내기 자바 스크립트

javascript:window.location='kakaolink://sendurl?msg='+encodeURIComponent(document.title+'%5Cn')+'&url='+encodeURIComponent(location.href)+'&appid=com.apple.mobilesafari&appver=7.0'

6. 마이피플로 웹페이지 링크 보내기 자바 스크립트

javascript:window.location='myp://sendMessage?message=%5Bmessage%5D'+encodeURIComponent(document.title)+'&url='+encodeURIComponent(location.href)+'&appID=com.apple.mobilesafari&appName=Safari'

7. 모바일 웹페이지 화면 확대/축소 자바 스크립트

javascript:var%20view=document.getElementsByName('viewport')%5B0%5D;if(!view)%20%7Balert('%EB%AA%A8%EB%B0%94%EC%9D%BC%20%ED%8E%98%EC%9D%B4%EC%A7%80%EA%B0%80%20%EC%95%84%EB%8B%99%EB%8B%88%EB%8B%A4.');%7D%20else%20%7Bview.content=%22width=device-width,%20initial-scale=1.0,%20minimum-scale=0.2,%20maximum-scale=3.0,%20user-scalable=yes%22;alert(%22%ED%99%95%EB%8C%80%5C/%EC%B6%95%EC%86%8C%20%EA%B0%80%EB%8A%A5%22);%7D

#. 자바 스크립트 책갈피 기능 살펴보기

1. 웹페이지 내 검색 책갈피

아래는 자바 스크립트를 이용한 웹페이지 내 검색 화면입니다. 웹페이지 내 검색 책갈피를 실행하면 검색어 팝업창이 뜨는데요. 

▲ 웹페이지 내 검색 화면

웹페이지 내에서 검색할 단어를 입력한 다음 승인 버튼을 누르면 현재 보고 있는 웹페이지에 검색 단어가 몇개가 있는지 검색해 줍니다. 또한 웹페이지에 검색단어를 노란색으로 표시해주기 때문에 어느 곳에 단어가 있는지 찾기 편리합니다.

2. 웹페이지 맨 밑으로 내리기 책갈피

아래 그림은 Daum 모바일 화면에서 웹페이지 맨 밑으로 내리기 책갈피 기능을 실행한 화면입니다. 

3~4. 마이크로소프트, 구글 번역기를 이용한 영↔한 번역 책갈피

▲ 마이크로소프트 번역(영↔한) 화면

▲ 구글 번역(영↔한) 화면

5. 카톡으로 웹페이지 링크 보내기 책갈피

사파리에서 카톡으로 웹페이지 링크 보내기 책갈피를 실행하면 현재 보고 있는 웹페이지 주소를 카톡 친구들에게 링크로 보낼 수 있습니다.

6. 마이피플로 웹페이지 링크 보내기 책갈피

카톡과 마찬가지로 현재 보고 있는 웹페이지 주소를 마이피플 친구들에게 링크로 보낼 수 있습니다.

6. 모바일 웹페이지 화면 확대/축소 책갈피

모바일 웹페이지 화면 확대/축소 책갈피 기능은 확대/축소가 되지 않는 모바일 웹페이지 화면을 확대/축소해 주는 기능입니다. 모바일 웹페이지에서 화면 확대/축소 책갈피 기능을 실행하면 아래와 같은 팝업창이 뜨는데요. 

승인 버튼을 누르고 나면 모바일 웹페이지 화면의 확대/축소가 가능해 집니다. 확대/축소는 두 손가락으로 화면을 늘리고 줄이면 됩니다. 

▲ 모바일 웹페이지 원래 화면(좌) / 확대 화면(우)

여기까지 자바 스크립트를 이용한 아이폰 사파리의 책갈피 활용법에 대해 알아봤습니다. 자바 스크립트로 사파리의 기능을 확장해 보세요.^^

이상으로 엠스블로그였습니다.

★ 엠스블로그와 친해지는 방법 4가지!! ^0^

1. 댓글 남기기 2. 트위터 팔로잉하기→엠스블로그(@emscloud) 3. 카카오스토리에서 emscloud 채널 구독하기 4. 구글 또는 다음, 네이버에서 엠스블로그 검색

★ 이것만은 꼭 지켜주세요!!!

1. 엠스블로그 동의없는 블로그 글 내용,사진 무단 전제 및 재배포 금지! 2. 정보공유를 위한 블로그 주소 링크 공유는 얼마든지 환영합니다.^^

★ 위 글이 도움이 되셨다면 아래의 공감(♡) 한번 눌러주세요~^^ 공감(♡)은 블로그 글 작성에 큰 힘이 됩니다.

▼▼▼