如何使用 Javascript 創建工具欄/書簽？

Question

嗨，我是 JavaScript 新手，需要一些幫助。 我正在嘗試創建一個可以通過使用書簽在任何網站上查看的工具欄，該工具欄只是一個帶有幾個鏈接的 div。 但我堅持如何實現這一目標。 任何幫助實現這一點將不勝感激。

Answer 1

大多數執行諸如“創建工具欄”之類的復雜操作的書簽只是將外部腳本添加到調用書簽的頁面上。

基本上你所要做的就是寫一個包含 javascript 的鏈接，這可以通過用javascript:啟動href=""來實現javascript:

因此，讓我們從 href 中的腳本開始，該腳本會將外部 JavaScript 添加到您的頁面

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>

但是你想讓這個書簽成為可能，所以我們必須添加更多的混亂……這部分必須以不同的方式完成，具體取決於瀏覽器

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

您可以將其包含在要添加書簽按鈕的頁面上。 不過有幾點需要注意

1. 這在歌劇中是行不通的……但誰在乎歌劇
2. webkit 瀏覽器（chrome 和 safari）不允許 javascript 創建書簽

最后，您需要將所有內容混合成一個丑陋的鏈接

 <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 擴展程序或Firefox 插件而不是書簽，因為您對兩者中的任何一個都有更多的功能。

至於如何使用 JavaScript 制作工具欄，那么您將不得不為此提出另一個問題.. 太多了，您已經說得夠多了，我在這里回答。

Answer 2

轟炸機，

Greg Guida 關於包含外部腳本的提示將允許您創建一個很棒的、干凈的基於書簽的工具欄。 為什么？ 因為您將能夠使用 JQuery 等 JavaScript 庫。

這是您要求幫助您入門的快速示例。 bookmarklet 創建一個帶有 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 元素作為 body 元素的子元素。

如果一切順利，使用書簽后，您應該會在頁面右上角看到一個黃色框，其中包含指向 Stack Overflow 主頁的鏈接。 Bombedmetor - 我希望這可以幫助您入門。 在您熟悉這些東西的工作方式后，您可以應用 Greg 的智慧以只需單擊或兩次即可將其添加到人們的瀏覽器中的方式來創建您的工具欄書簽。

需要記住的一點：正如 Greg 所指出的，書簽代碼被視為錨元素的 href 屬性的內容。 這就是我在上面的代碼中使用單引號的原因。

要查看的一些網站/文章：

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