1

我有一个 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 中并执行脚本以便生成按钮？

4

2 回答 2

2

您是否在项目中使用 Turbolinks、PJAX 或其他类似的 gem？如果是这样，请参阅此线程：

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
于 2013-02-25T20:23:21.537 回答
0

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

对于新的 Twitter 按钮，带有 ID 的脚本标签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

于 2015-07-08T15:19:57.287 回答