“固定它”按钮源代码 (pinterest.com)

发布于 2024-12-25 18:13:57 字数 169 浏览 1 评论 0原文

有谁知道如何在 pinterest.com 中实现“PIN IT”按钮之类的功能？从高层来看，我了解它的作用，但不详细。您单击“固定它”书签，然后抓取网站源代码以查找宽度和高度大于某个阈值的图像。抓取页面源以查找图像可以发生在客户端或服务器端。实现类似目标的最佳方法是什么？

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

不及他 2025-01-01 18:13:57

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

当你点击书签时，它会通过重定向到以下 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 并获取您想要获取的内容（图像、视频链接等）并应用您的逻辑很容易。

我希望这有帮助:-)

Actually this kind of bookmarks usually do this:

When you click on Bookmark, then it will run an JavaScript code by redirecting to following URL:

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

Then SOME_CODE will execute. In this case Pin it button will run following:

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

Which will end up adding new tag to your document body. Pin It will add "pinmarklet.js" file. Note that "?r=' + Math.random() * 99999999" part is only for get by passing cache from client side by generating new number every time randomly.

If you want to find out exactly what happened next, then you need to take a look at their JavaScript source code. But it's easy to look into DOM and grab what ever you want to grab (Images, Video Links, ...) and apply your logic.

I hope this helps :-)

回复收藏 0 原文