javascript 通过 JS 重新渲染推文按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6206471/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Re-render Tweet button via JS
提问by Koes Bong
I used to use this snippetto re-render a Tweet button.
我曾经使用这个片段来重新渲染一个 Tweet 按钮。
var tweetButton = new twttr.TweetButton(twitterScript);
twttr.render();
But it looks like widgets.js (http://platform.twitter.com/widgets.js) has been modified so twttr.TweetButton is no longer a constructor.
但看起来 widgets.js ( http://platform.twitter.com/widgets.js) 已被修改，因此 twttr.TweetButton 不再是构造函数。
Can anyone help with this issue?
任何人都可以帮助解决这个问题吗？
采纳答案by Paul D. Waite
Looks like the twttr.TweetButtonconstructor was never supported, and now no longer works after the last API update:
看起来twttr.TweetButton从未支持构造函数，现在在上次 API 更新后不再起作用：
The supported method is to create an iframe-based Tweet button dynamically:
支持的方法是iframe动态创建一个基于的 Tweet 按钮：
Although note @Runningskull's answerfor updated information.
尽管请注意@Runningskull对更新信息的回答。
回答by Aurimas
回答by Runningskull
For anyone stumbling onto this, there's a new, easier way to do it (as of 5/28/12 if not before). A quick glance didn't find it in the documentation, but you can do twttr.widgets.load(). That'll [re]load all the widgets on the page.
对于任何遇到此问题的人，有一种新的、更简单的方法来做到这一点（截至 2012 年 5 月 28 日，如果不是之前的话）。快速浏览在文档中没有找到它，但你可以做twttr.widgets.load(). 这将[重新]加载页面上的所有小部件。
EDIT: It is documented, after all. Check out this page's "Optimization" section (which you can't link to directly)
编辑：毕竟它被记录在案。查看此页面的“优化”部分（您无法直接链接到该部分）
回答by madoke
you just need to call twttr.widgets.load()after your ajax call. no need to reload a script that is already loaded.
您只需要twttr.widgets.load()在 ajax 调用后调用。无需重新加载已加载的脚本。
回答by Jamie
I just had the same problem, this works in JQuery:
我刚刚遇到了同样的问题，这在 JQuery 中有效：
$.getScript('http://platform.twitter.com/widgets.js');
回答by ChiCgi
First, make sure you have jQuery included in your document's head:
首先，确保您的文档头部包含 jQuery：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
Then create a link that has the same URL as the eventual tweet button, along with an empty div where your button will be rendered:
然后创建一个与最终推文按钮具有相同 URL 的链接，以及一个空的 div，您的按钮将在其中呈现：
<a href="http://www.my-site-to-tweet-about.com" id="tlink"></a>
<div id="tbutton"></div>
At the bottom of your page, right above the /body tag, include the javascript from Twitter and the function that will render the button, as well as the listener that will activate the function when the desired event takes place:
在页面底部，/body 标签正上方，包含来自 Twitter 的 javascript 和将呈现按钮的函数，以及在所需事件发生时激活该函数的侦听器：
<script type="text/javascript">
//async script, twitter button fashiolista.com style
(function() {
var s = document.createElement('SCRIPT');
var c = document.getElementsByTagName('script')[0];
s.type = 'text/javascript';
s.defer = "defer";
s.async = true;
s.src = 'http://platform.twitter.com/widgets.js';
c.parentNode.insertBefore(s, c);
})();
function renderTweetButton(tbutton,tlink){
var href = $("#"+tlink).attr('href'),
$target = $("#"+tbutton),
qstring = $.param({ url: href, count: "vertical" }),
toinsert = '<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/tweet_button.html?'+qstring+'" style="width:57px; height:70px;"></iframe>';
$target.html(toinsert);
}
$("#hoverlink").mouseenter(function() {
renderTweetButton("tbutton","tlink");
});
</script>
Lastly, add a link to your page somewhere that will activate the function above based on some event:
最后，在您的页面某处添加一个链接，该链接将根据某些事件激活上述功能：
<a href="#" id="hoverlink">Hover here to render a tweet button to div#tbutton.</a>
That's it.
而已。
If you want the entire test HTML page to see how I've got it working, see here:
如果您希望整个测试 HTML 页面了解我的工作方式，请参见此处：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Twitter Button Render Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<a href="http://www.my-site-to-tweet-about.com" id="tlink"></a>
<div id="tbutton"></div>
<a href="#" id="hoverlink">Hover here to render a tweet button to div#tbutton.</a>
<script type="text/javascript">
//async script, twitter button fashiolista.com style
(function() {
var s = document.createElement('SCRIPT');
var c = document.getElementsByTagName('script')[0];
s.type = 'text/javascript';
s.defer = "defer";
s.async = true;
s.src = 'http://platform.twitter.com/widgets.js';
c.parentNode.insertBefore(s, c);
})();
function renderTweetButton(tbutton,tlink){
var href = $("#"+tlink).attr('href'),
$target = $("#"+tbutton),
qstring = $.param({ url: href, count: "vertical" }),
toinsert = '<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/tweet_button.html?'+qstring+'" style="width:57px; height:70px;"></iframe>';
$target.html(toinsert);
}
$("#hoverlink").mouseenter(function() {
renderTweetButton("tbutton","tlink");
});
</script>
</body>
</html>
回答by Teddy
Try the @Anywhere library. Sample js code:
试试@Anywhere 库。示例js代码：
twttr.anywhere(function (T) {
T("#tweetbox").tweetBox({
counter: false,
defaultContent: "Default text in a Tweet box...",
label: "Share this page on Twitter"
});
