加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

如何在通过ajax加载页面后显示Twitter / Facebook / Google按钮

发布时间:2020-12-16 02:50:20 所属栏目:百科 来源:网络整理
导读:我有一个rails 3.1应用程序,我希望允许用户通过Twitter,Google和Facebook(类似按钮的 HTML5版本)共享项目.我在项目的显示页面上工作得很好(即 ??- 只显示一个项目),但我在容器页面上遇到问题,该页面通过Ajax加载列表中的项目.我希望在容器中的每个项目旁边都
我有一个rails 3.1应用程序,我希望允许用户通过Twitter,Google和Facebook(类似按钮的 HTML5版本)共享项目.我在项目的显示页面上工作得很好(即 ??- 只显示一个项目),但我在容器页面上遇到问题,该页面通过Ajax加载列表中的项目.我希望在容器中的每个项目旁边都有单独的共享按钮.

页面第一次加载时,每个项目旁边的共享按钮显示正常.只有当我通过ajax重新加载容器时才会出现问题. Twitter,Google和Facebook按钮不显示.以下是我设置的方法:

application.html.haml

-# This is right before the body tag closes
= render 'site/share_js'

_share_js.html.erb(来自每个提供商的代码)

<div id="fb-root"></div>
<script>(function(d,s,id) {
var js,fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=MY_APP_ID";
fjs.parentNode.insertBefore(js,fjs);
}(document,'script','facebook-jssdk'));</script>


<%# Twitter %>
<script>!function(d,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>

<%# Google+ %>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

_share_buttons.html.erb(要传递的项目的URL)

<div class="share-buttons">

<%# Twitter %>
<a  href="https://twitter.com/share" 
class="twitter-share-button" 
data-lang="en"
data-count="horizontal"
data-text="<%= share_text %>"
data-url="<%= bly_url %>">
Tweet
</a>

<%# Google+ %>
<g:plusone size="medium" href="<%= full_url %>"></g:plusone>

<%# Facebook %>
<div    class="fb-like" 
    data-href="<%= full_url %>" 
    data-send="true" 
    data-layout="button_count" 
    data-width="75"
    data-image="<%= image_path_here %>" 
    data-show-faces="false"></div>

</div>

如果我在项目的显示页面上或者第一次加载容器时使用share_buttons partial,它的效果很好:

_my_item.html.haml

-# other code here that displays the item...
= render :partial => 'site/share_buttons',:locals => share_info_hash

但是,正如我在上面提到的那样,在ajax动作之后它不起作用:

my_ajax_action.js.erb(通过控制器中的format.js调用)

$("#item-container").html("<%= escape_javascript(render :partial => "my_item",:collection => @item_list)%>");

所有项目都在容器中正确显示,但共享按钮未显示.我猜测问题是执行特定的javascript需要在执行ajax操作后运行.在刷新html之后,我尝试将提供程序javascript放在my_ajax_action.js.erb文件中,但这似乎没有办法.有没有人对如何让这个工作有任何想法?非常感谢任何帮助!

解决方法

您尝试渲染的按钮使用搜索和替换技术.当onload发生时,当成为按钮的元素已经存在于页面上时,这没有任何特殊干预.

但是,在您的情况下,在执行替换脚本之后插入成为按钮的元素.由于订单与脚本的预期不同,因此在将新按钮添加到页面后,您需要自己触发渲染.

以下是一些文档链接,解释了如何为每个服务执行此操作:

Google 1按钮:https://developers.google.com/+/plugins/+1button/#example-explicit-load

Facebook赞按钮:http://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/

Tweet按钮:我在文档中找不到这个,但基于一些论坛活动,这看起来像你正在寻找的代码:

twttr.widgets.load();

(见相关论坛帖子:https://dev.twitter.com/discussions/890)

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读