在页面上创建叠加的书签

Question

我一直在寻找一种方法，使用书签在页面的右上角显示一个简单的红色div，但似乎无法在网上找到任何教程。任何人都可以快速了解我如何创建这样的书签吗？

Answer 1

一般要创建书签还是如何使用javascript显示框？

将您的东西添加到右上角的正文

让我们从后一部分开始 - 你标记了jquery，所以让我们继续（尽管对于书签来说可能有点重）：

// create the element:
var $e = $('<div id="yourelement"></div>');

// append it to the body:
$('body').append($e);

// style it:
$e.css({
    position: 'absolute',
    top: '10px',
    right: '10px',
    width: '200px',
    height: '90px',
    backgroundColor: 'red'
});

这就是你所需要的......

创建书签的最简单方法，包括jquery

我们需要做什么：

1. 将上面的代码保存到服务器上托管的javascript文件中。
2. 创建一段javascript代码，将jquery和新托管的javascript文件添加到当前页面的正文
3. 将该javascript代码放在<a>代码中。

这是执行此操作的代码：

javascript:var i,s,ss=['http://yourdomain.com/path-to-your-script','http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js'];for(i=0;i!=ss.length;i++){s=document.createElement('script');s.src=ss[i];document.body.appendChild(s);}void(0);

它只是循环遍历数组并将<script>标记附加到其正文，并将两个javascript文件的路径都设为src。

至于创建书签本身，您只需将所有代码放在<a>标记内，有点像这样（注意双引号）：

<a href="javascript:javascript:var i,s,ss=['http://yourdomain.com/path-to-your-script','http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js'];for(i=0;i!=ss.length;i++){s=document.createElement('script');s.src=ss[i];document.body.appendChild(s);}void(0);">Drag me to your toolbar</a>

就是这样。

请注意，bookmarklet实际上会覆盖网站上使用的jquery版本，如果有的话......可能会破坏某些网站......

有关创建bookmarklet的更多信息：

http://betterexplained.com/articles/how-to-make-a-bookmarklet-for-your-web-application/

Answer 2

你必须克服以下几点：

• 如果jQuery尚不存在，则将jQuery附加到页面
• 缩小代码并包装在自动执行的机箱中

以上是@ anrorhs上面例子中的一个例子：

<a href="(function(){var $e = $('<div id="yourelement"></div>');$('body').append($e);$e.css({    position: 'absolute',    top: '10px',    right: '10px',    width: '200px',    eight: '90px',    backgroundColor: 'red'});})();">drag me to your bookmarks bar</a>

要对jQuery进行内联检查 - 请按照以下教程进行操作：http://benalman.com/projects/run-jquery-code-bookmarklet/

这将使您能够粘贴上面的代码，它将有条件地从Google的CDN加载jQuery（当页面上尚未出现时）。

干杯。