Question

我正试图像Pinterest一样制作一个新的按钮，我看到该书签的内容：

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

我是javascript的新手，所以我不知道如何开始做一个新的。我甚至不知道我应该从哪里开始编码。此Pin按钮的后端是否有限？任何人都可以介绍这个Pin it按钮是如何工作的？非常感谢你。

Answer 1

基本上该代码的作用是在页面中注入<script>标记。实际的“pin it”代码位于pinmarklet.js文件中。

要制作这样的自己的功能，您可以重复使用代码并将源代码替换为您自己的JavaScript文件。

旁注：void(...)部分是多余的，因为该函数无论如何都不会返回任何内容。

Answer 2

您发布的代码只是将一个JavaScript文件注入到页面的DOM中，这将导致它被JavaScript引擎解释。您应该更感兴趣的是此文件中的代码实现了“Pin It”功能： http://assets.pinterest.com/js/pinmarklet.js

但是，由于这是缩小的，有些混淆，可能是专有的，我建议你首先想要一个关于如何创建Bookmarklet的简单教程： http://betterexplained.com/articles/how-to-make-a-bookmarklet-for-your-web-application/

然后，您需要考虑如何编写自己的Web应用程序代码以响应异常请求“Pin”或保存某些内容。如果您只是想要一个简单的“链接提交”类型的功能，以下两个简单但有用的JavaScript变量可以派上用场：

document.location.href - 获取网页的网址
document.title - 获取网页 TITLE 标记的内容

要将您的代码压缩为bookmarklet所需的单行，您可以使用此工具： http://subsimple.com/bookmarklets/jsbuilder.htm

Answer 3

如果您想将其添加到按钮，请按以下方式进行操作：

HTML：

<button id="pintrest">Pin It</button>

你编写脚本：

var btn = document.getElementById("pintrest");
btn.onclick = 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);
};

现在，当您点击按钮时，它应该运行pintrest代码

如何从pinterest实现“Pin it”功能

3 个答案: