Question

您好我是JavaScript新手，需要一些帮助。我正在尝试创建一个工具栏，可以通过使用书签在任何网站上查看，工具栏只是一个带有几个链接的div。但我坚持如何实现这一目标。任何帮助实现这一点将不胜感激。

Answer 1

大多数做了诸如“创建工具栏”之类的东西的小书签只是将外部脚本添加到调用小书签的页面上。

基本上你所要做的就是写一个包含javascript的链接，可以通过href="" javascript:

启动

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

来实现

所以我们先从一个href中的脚本开始，它将为您的页面添加一个外部JavaScript

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

然而你想要使这个书签能够这样，我们必须添加一个更混乱的层次......这部分必须以不同的方式完成，具体取决于浏览器

 <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>

您可以在要添加书签按钮的页面上包含该内容。有几点需要注意

这不会在歌剧中发挥作用..但谁在乎歌剧
webkit浏览器（chrome＆amp; safari）不允许javascript创建bookmarklet

最后，您需要将其全部混合到一个丑陋的链接中

{{1}}

最后虽然我建议您考虑制作Google Chrome Extension或Firefox Plugin而不是书签，因为您可以使用其中任何一个获得更多功能。

至于如何使用JavaScript创建一个工具栏，那么你只需要再提出一个问题了......它太多了，你还没有充分说明你要做什么让我在这里回答它

Answer 2

bombedmetor，

Greg Guida关于包含外部脚本的提示将允许您创建一个非常棒，干净的基于书签的工具栏。为什么？因为你将能够使用像JQuery等的JavaScript库

以下是您要求帮助您入门的快速示例。 bookmarklet创建一个div元素，其中包含指向Stack Overflow主页的链接。

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的位置。

代码执行以下操作：

创建一个新的div元素。
创建一个新的锚元素并设置href属性的值。
为新div的样式属性指定一些基本值（这样您就可以轻松看到它）。
将锚点附加为新div的子元素。
将新div元素追加为body元素的子元素。

如果一切顺利，您应该在使用书签后看到一个黄色框，其中包含指向页面右上角的Stack Overflow主页的链接。 bombedmetor - 我希望这有助于你开始。在您熟悉这些工作方式之后，您可以应用Greg的智慧来创建工具栏书签，只需点击一下即可添加到人们的浏览器中。

需要注意的事项：正如Greg所指出的，bookmarklet代码被视为锚元素的href属性的内容。这就是我在上面的代码中使用单引号的原因。

要查看的部分网站/文章：

如何使用Javascript创建工具栏/书签？

2 个答案: