在页面上创建叠加层的书签

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 代码放置在 标记内。

这是执行此操作的代码：

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

它只是循环遍历数组并将

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

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

就是这样。

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

有关创建书签的更多信息：

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

Answer 2

您必须克服以下问题：

• 如果 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/

这将使您能够粘贴上面的代码，并且当页面上尚未存在 jQuery 时，它将有条件地从 Google 的 CDN 加载 jQuery。

干杯。