如何创建像pinterest / snatchly这样可以废弃图像的书签

时间:2012-04-19 03:41:11

标签: jquery image web-scraping bookmarklet pinterest

我很想知道是否有人可以分享关于如何创建像pinterest或snatchly这样可以废弃图片的书签的链接/教程。

由于 乔恩

3 个答案:

答案 0 :(得分:2)

Bookmarklet通常以javascript:和javascript表达式开头。您可以先在Google Chrome Web Inspector中运行javascript代码,然后使用一些javascript压缩工具压缩它,然后制作href等于javascript:alert("You%20code%20after%20:");的锚标记

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

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

答案 1 :(得分:2)

我发布了一篇文章,描述了如何在步骤中创建这些书签。

您可以在此处查看:http://jszen.com/how-to-make-pinterest-like-bookmarklet-pin-it.3.html

答案 2 :(得分:0)

为了超越Encore PTL的答案,以下脚本创建了在任何给定页面上浏览器中加载的第4张图像的副本:

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'

他们的服务器发回一个更复杂的脚本,该脚本使用存储在其“rules”对象中的CSS构建模态窗口。剪辑规则:

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