在 Chrome 浏览器中按下后退按钮时，Facebook Like 按钮会更改位置

Question

我目前已经实现了一个类似于此处所示的垂直社交分享插件栏。

http://www.socialmediaexaminer.com/10-ways-to-add-facebook-functionality-to-your-website/

我使用了为 Facebook 的点赞按钮生成的相同代码。我正在使用生成的 HTML5 代码。使用 Chrome 浏览器时，按下后退按钮时，Facebook 点赞按钮会稍微偏离其位置。我不确定是什么原因导致这种情况发生以及如何解决它。

Facebook 点赞按钮的使用代码:

<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=504480219635937";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>

Answer 1

当我查看您的源代码时，我发现您正在使用表格(这可能是一个潜在的问题)。在正常页面加载 span宽度和高度已设置。单击后退按钮后，这些属性未设置(这些属性将自动计算)。在正常情况下这会起作用，但我猜当您单击后退按钮时数据不会刷新/重新加载，因此宽度和不会重新计算高度。您可以尝试设置 data-width="122" data-height="20" .

例如。 <div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-width="81" data-height="20" data-show-faces="true" data-share="true"></div>

或通过 CSS 强制:

.fb-like iframe {
  width: 81px !important;
  height: 20px !important;
}

另请阅读以下文章:Ajax, back button and DOM updates

编辑:经过一些研究后，发生这种情况的另一个可能原因与 WebKit 浏览器的缓存有关(很奇怪，因为它适用于我的 iPhone)。他们提供的解决方案是禁用 onunload功能:

window.onunload = function(){};

参见 The Safari Back Button Problem

可能修复:经过更深入的调查后，我发现 Chrome 在控制台中给出了一个错误:fb:like failed to resize in 45s .

以下代码将是一个临时修复(fb:login_button failed to resize in 45s):

#fb_login_button { 
    width: 80px; 
}
#fb_login_button span, 
#fb_login_button iframe {.
    width: 80px !important;
    height: 25px !important;
}

同样，我对此不确定