在Chrome浏览器中按下后退按钮时,Facebook赞按钮会改变位置

Question

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

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

我使用了从Facebook为类似按钮生成的相同代码.我正在使用生成的HTML5代码.使用Chrome浏览器时,按下后退按钮时,Facebook like按钮会略微偏离其位置.我不确定是什么导致这种情况发生以及如何解决它.

使用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、后退按钮和 DOM 更新

编辑：经过一些研究后，发生这种情况的另一个可能原因与 WebKit 浏览器的缓存有关（奇怪，因为它可以在我的 iPhone 上运行）。他们提供的解决方案是禁用该onunload功能：

window.onunload = function(){};

请参阅Safari 后退按钮问题

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

以下代码是临时修复（fb:login_button 未能在 45 秒内调整大小）：

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

再说一次，我对此不确定