ajax - 使用 AJAX 和 Facebook Like、Twitter Tweet、G+ 的 JQuery Mobile

标签 ajax jquery-mobile twitter facebook-like google-plus-one

我希望在使用 JQuery Mobile 构建的网站的每个页面上都有类似 fb 的按钮、twitter 的推文按钮和 G+ 等价按钮,并且不放弃 AJAX 转换。

我可以让它适用于多页(将 example0.html#1 链接到 example0.html#2 并返回)

我可以使用自定义的基本 javascript(例如alert('*');)来正确运行(每个页面显示一次,example1.html <-> example2.html)。使用 jquery .off 和 .on。

我可以关闭ajax来完成它。工作正常 example1.html <-> example2.html

但是,对于带有ajax和更多单页的社交按钮来说,效果不太好。这些按钮应该显示在每个页面上,例如example1.html <-> example2.html

有任何社交按钮的工作示例吗?

(类似的问题,但也没有工作示例:Integrating jQuery Mobile with Facebook Like and Twitter Tweet)

完整示例,适用于第一个(已加载)页面,不适用于另一个页面。

<pre><code><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script> </head> <body> <div data-role="page" id="page1" data-title="Page 1"> <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=121542504547391"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> <div class="fb-like" data-href="http://localhost" data-send="false" data-layout="button_count" data-width="250" data-show-faces="false"></div> <a href="#page2" data-role="button" data-icon="arrow-r" data-iconpos="right">Page 2</a> </div> <div data-role="page" id="page2" data-title="Page 2"> <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=121542504547391"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> <div class="fb-like" data-href="http://localhost" data-send="false" data-layout="button_count" data-width="250" data-show-faces="false"></div> <a href="#page1" data-role="button" data-icon="arrow-l">Page 1</a> </div> </body> </html> </code></pre>

最佳答案

在推文按钮嵌入代码中,有一个 if 语句检查 ID 为“twitter-wjs”的元素。在页面加载之前删除此元素可使推文按钮正常工作。

$(document).bind('pagebeforeload', function(){
    $('#twitter-wjs').remove();
});

这里修复了 Facebook 点赞按钮。我不会假装理解它,我刚刚找到了这个谷歌搜索,它似乎使它起作用。

$(document).bind('pageshow', function() {
    try{
        FB.XFBML.parse();
    } catch(err){}
});

关于ajax - 使用 AJAX 和 Facebook Like、Twitter Tweet、G+ 的 JQuery Mobile,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12394124/

相关文章:

javascript - 删除 div 内容并添加 iframe

php - yii 和 jquery 移动

jQuery mobile 不允许我使用自定义类名

java - quarkus 应用程序中找不到camel-twitter 组件

css - 左侧和右侧容器不能改变右侧

ajax - 如何将 @ConversationScoped 与 Ajax 请求一起使用?

javascript - 具有多个文件输入的表单

twitter - "Sneak peak"Twitter 帐户如何运作?

javascript - 如何从 FormData 中删除值

ajax - Grails:从AJAX响应获取对象/模型