2

我希望在使用 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）

完整示例，适用于第一个（已加载）页面，不适用于另一页。

<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>

4

2 回答 2

4

在推文按钮嵌入代码中，有一个 if 语句检查 id 为“twitter-wjs”的元素。在页面加载之前删除此元素会使推文按钮起作用。

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

这是 Facebook 喜欢按钮的修复程序。我不会假装理解它，我只是发现了这个谷歌搜索，它似乎使它工作。

$(document).bind('pageshow', function() {
    try{
        FB.XFBML.parse();
    } catch(err){}
});
于 2012-11-09T18:17:21.660 回答
2

Garyv已经为您提供了 Facebook 的正确答案：

FB.XFBML.parse();

要动态地重新加载 Tweet 按钮，您正在寻找的功能是：

twttr.widgets.load();

您应该在通过 ajax 加载内容后应用这两个函数。

更新：

根据 Google+ 按钮，答案是：

gapi.plusone.go();

（在这里找到：Google plus-one button on a page that are refreshed with AJAX

于 2012-11-22T21:39:43.220 回答