jquery - 如何创建像 pinterest/snatchly 这样可以抓取图像的书签

Question

我很想知道是否有人可以分享一个链接/教程，了解如何创建像 pinterest 这样的书签或可以抓取图像的 snatchly。

谢谢乔恩

Answer 1

I have posted an article describing how to create these sort of bookmarklet in steps.

You can check it here: http://jszen.com/how-to-make-pinterest-like-bookmarklet-pin-it.3.html

Answer 2

书签通常以javascript:javascript 表达式开头。您可以先在 Google Chrome Web Inspector 中运行它来测试您的 javascript 代码，然后使用一些 javascript 压缩实用程序对其进行压缩，并制作一个带有 href 的锚标记等于javascript:alert("You%20code%20after%20:");

确保在将代码放入锚标记之前对代码进行 url 编码。

关于拉取图像，您可以调用此 javascript 并获取网页上的所有图像document.getElementsByTagName('img')

Answer 3

为了比 Encore PTL 的答案更进一步，以下脚本会在任何给定页面上创建在浏览器中加载的第四张图像的副本：

javascript:var%20e=document.createElement('img');var%20n=document.getElementsByTagName('img')[3].src;e.setAttribute('src',n);document.body.appendChild(e);

注意：我们必须对任何空格使用“%20”。

我不确定如何在 Pinterest 的叠加层中完成所有漂亮的事情 - 看起来他们的书签调用脚本：

http://assets.pinterest.com/js/pinmarklet.js?r='somenumber'

他们的服务器发回一个更复杂的脚本，该脚本使用存储在其“规则”对象中的 CSS 构建模式窗口。规则截图：

background: transparent; top:0; right:0; bottom:0; left:0; width: 100%; border: 0;