Javascript 如何重新启用Pinterest'；s别针按钮？

我试图在页面加载后创建并操作pinit按钮。当我用js更改按钮属性时，应该重新调用它以获得固定动态加载图像的功能。那么，Pinterest有没有像Facebook的B.XFBML.parse（）函数那样的方法

谢谢…

他们的文件在其中引用，不会公开任何全局文件。它只运行一次，除了它创建的iframe之外，不会留下任何跟踪

---

您可以再次插入该文件以“解析”新按钮。他们的JS在运行时会查看所有锚定标记，并用iframe'd按钮替换为

class=“pin it button”

。

最好的方法是：

移除要操作的“锁定”按钮的iframe

为新按钮添加html，并根据需要对其进行操作

重新调整脚本-即使用jQuery：

$.ajax({ url: 'http://assets.pinterest.com/js/pinit.js', dataType: 'script', cache:true});

这对我来说很好：它在点击事件中拾取所有数据

首先，我查看了pinit.js，确定它用iframe替换了特别标记的锚标记。我想我可以编写javascript逻辑来获取生成的iframe上src属性使用的主机名

因此，我根据pinterest的正常建议插入了标记，但我将锚定标记放入了一个不可见的div中

<div id='dummy' style='display:none;'>
<a href="http://pinterest.com/pin/create/button/?
    url=http%3A%2F%2Fpage%2Furl
    &media=http%3A%2F%2Fimage%2Furl" 
   class="pin-it-button" count-layout="horizontal"></a>
</div>
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js">
</script>

尝试阅读这篇文章，它使用一点javascript将pinterest iframe替换为一个新按钮，然后重新加载pinit.js文件。下面是实现这一技巧的javascript

refreshPinterestButton = function (url, media, description) {
    var js, href, html, pinJs;
    url = escape(url);
    media = escape(media);
    description = escape(description);
    href = 'http://pinterest.com/pin/create/button/?url=' + url + '&media=' + media + '&description=' + description;
    html = '<a href="' + href + '" class="pin-it-button" count-layout="horizontal"><img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>';
    $('div.pin-it').html(html);

    //remove and add pinterest js
    pinJs = $('script[src*="assets.pinterest.com/js/pinit.js"]');
    pinJs.remove();
    js = document.createElement('script');
    js.src = pinJs.attr('src');
    js.type = 'text/javascript';
    document.body.appendChild(js);
}

refreshPinterestButton=函数（url、媒体、描述）{
var-js、href、html、pinJs；
url=转义（url）；
媒体=逃避（媒体）；
描述=逃逸（描述）；
href='http://pinterest.com/pin/create/button/?url=“+url+”&media=“+media+”&description=”+description；
html=''；
$（'div.pin-it'）.html（html）；
//删除并添加pinterest js
pinJs=$（'script[src*=“assets.pinterest.com/js/pinit.js”]）；
pinJs.remove（）；
js=document.createElement（'script'）；
js.src=pinJs.attr（'src'）；
js.type='text/javascript'；
document.body.appendChild（js）；
}

我基于Derrek的解决方案（并修复了未声明的变量问题），使动态加载pinterest按钮成为可能，因此它不可能降低加载时间。只和最初的问题有点不相干，但我想我还是要和大家分享一下

文件末尾：

<script type="text/javascript">
addPinterestButton = function (url, media, description) {
    var js, href, html, pinJs;
    pinJs = '//assets.pinterest.com/js/pinit.js';
    //url = escape(url);
    url = encodeURIComponent(url);
    media = encodeURIComponent(media);
    description = encodeURIComponent(description);
    href = 'http://pinterest.com/pin/create/button/?url=' + url + '&media=' + media + '&description=' + description;
    html = '<a href="' + href + '" class="pin-it-button" count-layout="vertical"><img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>';
    $('#pinterestOption').html(html);

    //add pinterest js
    js = document.createElement('script');
    js.src = pinJs;
    js.type = 'text/javascript';
    document.body.appendChild(js);
}
</script>

在要显示pinterest按钮的文档中，只需添加一个id为pinterestOption的元素，即

<div id="pinterestOption"></div>

---

希望这对别人有帮助

我重写了Pinterest按钮代码，以支持在加载AJAX内容后解析Pinterest标记，类似于FB.XFBML.parse（）或gapi.plusone.go（）。作为奖励，项目中的备用JavaScript文件支持HTML5有效语法

---

查看

我试图调整他们的代码，使其以同样的方式工作（直接访问，然后忘记它），另外，您可以调用Pinterest.init（），将页面上的任何“新”按钮（例如ajax中的、动态创建的等）转换为适当的按钮

项目：

---

原始：

要在页面加载后呈现“锁定”按钮，可以使用：

<a href="..pin it link.." id="mybutton" class="pin-it-button" count-layout="none">
    <img border="0" src="//assets.pinterest.com/images/PinExt.png" width="43" height="21" title="Pin It" />
</a>
<script>
    var element = document.getElementById('mybutton');
    (function(x){ for (var n in x) if (n.indexOf('PIN_')==0) return x[n]; return null; })(window).f.render.buttonPin(element);
</script>

var元素=document.getElementById（'mybutton'）；
（函数（x）{for（var n in x）如果（n.indexOf（'PIN'）==0）返回x[n]；返回null；}）（window.f.render.buttonPin（元素）；

---

当然，假设assets.pinterest.com/js/pinit.js已经加载到页面上。渲染对象还有一些其他有用的方法，如buttonBookmark，buttonFollow，ebmedBoard，embedPin，embedUser，以下是我所做的。。对@Derrick Grigg稍作修改，使其在AJAX重新加载后可在页面上的多个pinterest按钮上工作

refreshPinterestButton = function () {
    var url, media, description, pinJs, href, html, newJS, js;
    var pin_url;
    var pin_buttons = $('div.pin-it a');
    pin_buttons.each(function( index ) {
        pin_url = index.attr('href');
        url = escape(getUrlVars(pin_URL)["url"]);
        media = escape(getUrlVars(pin_URL)["media"]);
        description = escape(getUrlVars(pin_URL)["description"]);
        href = 'http://pinterest.com/pin/create/button/?url=' + url + '&media=' + media + '&description=' + description;
        html = '<a href="' + href + '" class="pin-it-button" count-layout="horizontal"><img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>';
        index.parent().html(html);
    });

    //remove and add pinterest js
    pinJs = '//assets.pinterest.com/js/pinit.js';
    js = $('script[src*="assets.pinterest.com/js/pinit.js"]');
    js.remove();
    js = document.createElement('script');
    js.src = pinJs;
    js.type = 'text/javascript';
    document.body.appendChild(js);
}

});


function getUrlVars(pin_URL)
{
    var vars = [], hash;
    var hashes = pin_URL.slice(pin_URL.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

refreshPinterestButton=函数（）{
var url、媒体、描述、pinJs、href、html、newJS、js；
var-pinu-url；
变量pin_按钮=$（'div.pin-it a'）；
引脚按钮。每个（功能（索引）{
pin_url=index.attr（'href'）；
url=escape（getUrlVars（pin_url）[“url”]）；
media=escape（getUrlVars（pin_URL）[“media”]）；
description=escape（getUrlVars（pin_URL）[“description”]）；
href='http://pinterest.com/pin/create/button/?url=“+url+”&media=“+media+”&description=”+description；
html=''；
index.parent（）.html（html）；
});
//删除并添加pinterest js
pinJs='//assets.pinterest.com/js/pinit.js'；
js=$（'script[src*=“assets.pinterest.com/js/pinit.js”]”）；
js.remove（）；
js=document.createElement（'script'）；
js.src=pinJs；
js.type='text/javascript'；
document.body.appendChild（js）；
}
});
函数getUrlVars（pin_URL）
{
var vars=[]，散列；
var hashes=pin_URL.slice（pin_URL.indexOf（'？'））+1.split（'&'）；
for（var i=0；i

只需将

数据pin构建

属性添加到

脚本

标记：

<script defer
  src="//assets.pinterest.com/js/pinit.js"
  data-pin-build="parsePinBtns"></script>

---

提示：要显示零计数，只需将

data pin zero=“1”

添加到

SCRIPT

标记。

正式方法是在加载脚本时设置“data pin build”属性：

<script defer="defer" src="//assets.pinterest.com/js/pinit.js" data-pin-build="parsePins"></script>

---

该网站上还有另一种方法可以让您使用。

自2020年6月起，Pinterest将pin js代码更新为v2。这就是为什么数据pin构建可能无法在上运行的原因

现在它可以在pinit_v2.js上运行

---

我没有测试脚本，但是直接通过getPinMarkup传递pageUri、mediaUri和description似乎对我有用，直到pinterest添加了它自己的函数。cloudfront是一种AWS产品，它将图像存储在云中。他们这么做可能是因为他们使用了那项服务。我真的希望它能工作，但我甚至不能让它在任何情况下工作

<a href="..pin it link.." id="mybutton" class="pin-it-button" count-layout="none">
    <img border="0" src="//assets.pinterest.com/images/PinExt.png" width="43" height="21" title="Pin It" />
</a>
<script>
    var element = document.getElementById('mybutton');
    (function(x){ for (var n in x) if (n.indexOf('PIN_')==0) return x[n]; return null; })(window).f.render.buttonPin(element);
</script>

refreshPinterestButton = function () {
    var url, media, description, pinJs, href, html, newJS, js;
    var pin_url;
    var pin_buttons = $('div.pin-it a');
    pin_buttons.each(function( index ) {
        pin_url = index.attr('href');
        url = escape(getUrlVars(pin_URL)["url"]);
        media = escape(getUrlVars(pin_URL)["media"]);
        description = escape(getUrlVars(pin_URL)["description"]);
        href = 'http://pinterest.com/pin/create/button/?url=' + url + '&media=' + media + '&description=' + description;
        html = '<a href="' + href + '" class="pin-it-button" count-layout="horizontal"><img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>';
        index.parent().html(html);
    });

    //remove and add pinterest js
    pinJs = '//assets.pinterest.com/js/pinit.js';
    js = $('script[src*="assets.pinterest.com/js/pinit.js"]');
    js.remove();
    js = document.createElement('script');
    js.src = pinJs;
    js.type = 'text/javascript';
    document.body.appendChild(js);
}

});


function getUrlVars(pin_URL)
{
    var vars = [], hash;
    var hashes = pin_URL.slice(pin_URL.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

<script defer
  src="//assets.pinterest.com/js/pinit.js"
  data-pin-build="parsePinBtns"></script>

// parse the whole page
window.parsePinBtns();

// parse links in #pin-it-buttons element only
window.parsePinBtns(document.getElementById('pin-it-buttons'));

<script defer="defer" src="//assets.pinterest.com/js/pinit.js" data-pin-build="parsePins"></script>

// render buttons inside a scoped DOM element
window.parsePins(buttonDomElement);

// render the whole page
window.parsePins();