Javascript를 사용하여 툴바/북마크릿을 만드는 방법은 무엇입니까?

Question

안녕하세요 저는 JavaScript 초보자이며 도움이 필요합니다. 북마크릿을 사용하여 모든 웹 사이트에서 볼 수있는 툴바를 만들려고하는데 툴바는 몇 개의 링크가있는 div에 불과합니다. 그러나 나는 이것을 달성하는 방법에 붙어있다. 이 일을 성취 할 수있는 도움이 있으면 대단히 감사하겠습니다.

Answer 1

"툴바 만들기"처럼 보완적인 기능을하는 대부분의 북마크릿은 북마크릿이 호출 된 페이지에 외부 스크립트를 추가하기 만하면됩니다.

은 기본적으로 당신이 할 일은 시작하여 acheived 수 있습니다 자바 스크립트가 포함 된 링크를 쓰기입니다 href=""

javascript: 너무 단지에 외부 자바 스크립트를 추가 할 것 HREF에서 스크립트를 시작할 수 있습니다 당신의 페이지

당신은 당신이 얻을 URL에 그 아래로 축소 그래서 만약

addScript = function (url) { 
    myScript = document.createElement('script'); 
    myScript.src = "url"; 
    document.head.appendChild(myScript); 
}; 
addScript("http://google.com/"); 

..

<a href="javascript:addScript=function(url){myScript=document.createElement('script');myScript.src=url;document.head.appendChild(myScript);};addScript('http://google.com/');"> click to add toolbar </a> 

그러나 요 U이 책갈피 - 수 그래서 우리는 ... 추가 할 필요가 혼란 한 번 더 수준의 프로그래머 만들고 싶어하고

addBookmark(url, title) { 
    if (window.sidebar) { // Firefox 
     window.sidebar.addPanel(url,bookmarkName,""); 
    } else if(window.external) { // IE 
     window.external.AddFavorite(url,bookmarkName); 
    } 
} 

당신은 페이지가를 포함 할 수 있습니다이 부분은 브라우저에 따라 다른 방법으로 수행되어야한다 북마크 추가 버튼이있는 곳입니다.

1. 이 밤은 오페라에서 일하려고하지만 몇 가지주의 할 ..하지만 누가 오페라에 대해
2. 웹킷 브라우저 (크롬 & 사파리를) 관심은 자바 스크립트가 마지막으로 당신을 북마크

을 만들 수 있도록 해달라고 결국 하나 개의 추악한 링크

<a href="javascript:addBookmark(\"javascript:addScript=function(url){myScript=document.createElement('script');myScript.src=url;document.head.appendChild(myScript);};addScript('http://google.com/');\",\"whatever you want the bookmarks name to be\")"> click to add bookmark </a> 

에 모든 것을 매시업 할 필요가 내가 제안하지만 당신은 Google Chrome Extension 또는 012을 들여다은 둘 중 하나에 더 많은 기능이 있으므로 책갈피 릿 대신 사용하십시오.

JavaScript를 사용하여 툴바를 만드는 방법에 관해서는 다른 질문을해야합니다. 너무 많이하고 헤이븐은 저에게 대답하기 위해 할 일에 대해 충분하게 말했습니다 이리.

Answer 2

bombedmetor, 당신은 멋진 깨끗한 북마크 기반 도구 모음을 만들 수 있습니다 외부 스크립트를 포함에

그렉 GUIDA의 팁. 왜? JQuery 등의 JavaScript 라이브러리를 사용할 수 있기 때문에

다음은 시작하는 데 도움이되는 간단한 예제입니다. 북마크 릿은 Stack Overflow 홈페이지에 대한 링크가있는 div 요소를 만듭니다.

javascript:void(function(){var divElmt=document.createElement('div');link1=document.createElement('a'); link1.href='http://stackoverflow.com';link1.innerHTML='StackOverflow Homepage';divElmt.style.backgroundColor='yellow';divElmt.style.position='fixed';divElmt.style.top='0px';divElmt.style.width='10em';divElmt.style.height='5em'; divElmt.style.border='solid red 4px';divElmt.style.zIndex='100'; divElmt.appendChild(link1);document.body.appendChild(divElmt);})(); 

위의 북마크릿을 사용하려면 즐겨 찾는 브라우저에 새 북마크를 만들고 정상적으로 URL을 배치 할 위치에 코드를 추가합니다.

1. 새로운 div 요소를 만듭니다

   코드는 다음을 수행합니다.

2. 새 앵커 요소를 만들고 href 특성 값을 설정합니다.
3. 새 div의 스타일 속성에 몇 가지 기본 값을 할당하므로 쉽게 볼 수 있습니다.
4. 앵커를 새 div의 하위 요소로 추가합니다.
5. 새 div 요소를 본문 요소의 자식으로 추가합니다. 모두가 잘된다면

, 당신은 북마크를 사용 후 페이지 오른쪽 상단의 스택 오버플로 홈페이지에 링크 노란색 상자가 표시됩니다. 폭탄 테러범 -이게 도움이되기를 바랍니다. 이러한 작업 방식에 익숙해지면 Greg의 지혜를 적용하여 툴바 북마크릿을 클릭 한 번만으로 사람들의 브라우저에 추가 할 수있는 방법으로 만들 수 있습니다.

유의 사항 : Greg가 나타내 듯이 북마크릿 코드는 앵커 요소의 href 속성 내용으로 처리됩니다. 이것이 위의 코드에서 작은 따옴표를 사용한 이유입니다.

일부 사이트/기사

은 체크 아웃 :

• http://en.wikipedia.org/wiki/Bookmarklets
• http://www.latentmotion.com/how-to-create-a-jquery-bookmarklet/