"Pin It"按钮源代码(pinterest.com)

Question

有没有人知道如何在pinterest.com中实现类似"PIN IT"按钮的东西？从高层次来看,我理解它的作用但不详细.单击"pin it"书签,然后刮取站点源代码以找出宽度和高度大于某个阈值的图像.抓取页面源以查找图像可以在客户端或服务器端进行.实现类似目标的最佳方法是什么？

有人可以深入了解他们的实施吗？

Answer 1

实际上这种书签通常是这样做的：

当您单击“书签”时，它将通过重定向到以下 URL 来运行 JavaScript 代码：

javascript: void((function () { SOME_CODE })());

然后 SOME_CODE 将执行。在这种情况下，固定按钮将运行如下：

javascript: void((function () {
    var e = document.createElement('script');
    e.setAttribute('type', 'text/javascript');
    e.setAttribute('charset', 'UTF-8');
    e.setAttribute('src', 'http://assets.pinterest.com/js/pinmarklet.js?r=' + Math.random() * 99999999);
    document.body.appendChild(e)
})());

这最终会向您的文档正文添加新标签。Pin 它将添加“pinmarklet.js”文件。请注意，“?r=' + Math.random() * 99999999”部分仅用于通过每次随机生成新数字从客户端传递缓存来获取。

如果你想确切地知道接下来发生了什么，那么你需要看看他们的 JavaScript 源代码。但查看 DOM 并获取您想要获取的内容（图像、视频链接等）并应用您的逻辑很容易。

我希望这有帮助 ：-）