1

我正在尝试像 Pinterest 一样制作一个新的 pin it 按钮，我已经看到了该书签上的内容：

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 it 按钮的后端是否受限？谁能介绍一下这个 Pin it 按钮是如何工作的？非常感谢。

4

3 回答 3

2

基本上，该代码所做的是将<script>标签注入页面。实际的“pin it”代码位于pinmarklet.js文件中。

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

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

于 2012-10-16T00:57:48.307 回答
2

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

但由于它被缩小并且有点混淆并且可能是专有的，我建议你首先想要的是一个易于遵循的关于如何创建书签的教程：http: //betterexplained.com/articles/how-to-make-a-用于您的网络应用程序的书签/

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

  • document.location.href -- 获取页面的URL
  • document.title -- 获取页面的TITLE标签的内容

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

于 2012-10-16T01:06:50.710 回答
1

如果要将其添加到按钮，方法如下：

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 代码

于 2012-10-16T00:57:18.000 回答