Question

我有一个div，我想通过jQuery加载twitter分享按钮。在页面加载时执行脚本时工作。但之后，当我手动执行此操作时，脚本似乎无法加载。

原始按钮：

<a href="https://twitter.com/share" class="twitter-share-button" data-via="givestreamuk">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

我尝试通过jQuery加载整个按钮（链接加脚本），但它没有用，我只是得到了链接。相反，我试图将脚本注入DOM，如下所示：

这是我的JS：

var twitter = '<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://customer-url" data-via="givestreamuk" data-hashtags="socialgiving">Tweet</a>';
jQuery('#twitter_share').html(twitter);

var jstext = '!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");';

var script   = document.createElement("script");
script.type  = "text/javascript";
script.text  = jstext;
jQuery('#twitter_share').append(script);

我的DIV按钮被放入：

<div id="twitter_share"></div>

当脚本在页面加载时执行但后手动执行，只有链接出现在div中。

有人可以建议我如何手动将此按钮加载到DIV中并让脚本执行以便生成按钮吗？

Answer 1

您在项目中使用Turbolinks，PJAX或其他类似的宝石吗？如果是，请参阅此主题：

https://github.com/rails/turbolinks/issues/25

这些解决方案：

http://www.blackfishweb.com/blog/asynchronously-loading-twitter-google-facebook-and-linkedin-buttons-and-widgets-ajax-bonus

http://reed.github.com/turbolinks-compatibility/facebook.html

Answer 2

如果您正在以dinamically方式插入内容，则必须修改Twitter脚本，因为只有第一个小部件才能正确加载。

对于新的Twitter按钮，标识为twitter-wjs的脚本标记已存在，if(!d.getElementById(id))将返回false。

只需向else添加if语句，以强制Twitter Widget对象检测新元素：

<script>
!function(d,s,id)
{
    var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';

    if(!d.getElementById(id))
    {
       js=d.createElement(s);
       js.id=id;
       js.src=p+'://platform.twitter.com/widgets.js';
       js.parentNode.insertBefore(js,fjs);
    }
    else
    {
        twttr.widgets.load();
    }
}(document, 'script', 'twitter-wjs');
</script>

来源：https://dev.twitter.com/web/javascript/initialization

无法通过Javascript加载Twitter分享按钮

2 个答案: