在某些浏览器中使用手风琴时不会出现 Tweet 按钮

Posted 2023-03-28

【中文标题】在某些浏览器中使用手风琴时不会出现 Tweet 按钮

【英文标题】：Tweet button doesn't appear when used in accordion with some browsers

【发布时间】：2019-02-28 19:09:42

【问题描述】：

我正在使用下面的代码来显示一个 twitter 按钮来分享来自一个网站的页面。

<script>$(document).ready(function()!function(d,s,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>

<a href="https://twitter.com/share" class="twitter-share-button" data-url="/myUrl" data-text="message" data-hashtags="myhashtag">Tweet</a>

无论我使用什么浏览器，此代码在页面中使用时都没有问题。

现在，当我想将该按钮放入 html 手风琴时，我的问题就开始了。当元素被放置在最初隐藏的东西中时，CSS 的行为会因浏览器而异。在 Chrome 上，大多数时候在展开手风琴时会显示推文按钮。在 Internet Explorer 和 Firefox（我没有 Edge 测试它）上，该按钮的计算大小为 1px。如果我使用开发人员工具为 CSS 中的按钮设置正确的大小，那么它就会出现。 javascript 完成了它的工作：脚本已加载，iframe 包含所有必要的代码，我对来自 twitter 网站的加载没有任何问题，我唯一的问题是计算出的 CSS 会阻止按钮的显示。

所以我正在寻求帮助来显示按钮，即使它在开始时被隐藏。

编辑：下面的 sn-p 试图证明我的问题。

.btn-o 
    width: 100% !important;

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script>$(document).ready(function()!function(d,s,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>
<p>
Tweet button not hidden at start
<a href="https://twitter.com/share" class="twitter-share-button" data-url="/myUrl" data-text="message" data-hashtags="myhashtag">Tweet</a>
</p>
<p>
Tweet button hidden at start

<div id="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        Here is also a tweet button, if you see nothing you have my bug demonstrated (don't work with IE or Firefox most of the time)
        <a href="https://twitter.com/share" class="twitter-share-button" data-url="/myUrl" data-text="message" data-hashtags="myhashtag">Tweet</a>
      </div>
    </div>
  </div>
</div>

</p>
</div>

【问题讨论】：

有人在这里解决了类似的问题，通过检查按钮宽度并在必要时重新渲染它：twittercommunity.com/t/…

@misorude 这似乎正是我的问题，谢谢您的评论。我会试试看，并会及时更新。

@misorude 感谢您的帮助我已经发布了我的解决方案，您的帖子真的很有帮助

【参考方案1】：

tweet 按钮的类似乎是 btn-o。尝试为 btn-o 添加样式

.btn-o 
    width: 100% !important;

【讨论】：

感谢您的建议，但它没有帮助：我已经更新了我创建的 sn-p 它仍然没有渲染任何东西

【参考方案2】：

我可以用 mozilla 重现该问题，并且在禁用添加阻止程序后，twitter 按钮显示手风琴外的第一个按钮：

经过更多调查，我发现您需要将一些高度和宽度设置为 100 像素或更大，并禁用一个属性溢出：隐藏；

这里是示例屏幕截图，最后您需要创建一些 mozilla/firefox 特定的 css 类来处理此更新：

所以你需要使用 firefox 特定的 css 示例：

@-moz-document url-prefix() 
 //inside put class you want to override

【参考方案3】：

好的，这是我设法让它工作的解决方案和解释：

第一个解释：twitter 寻找 twitter-share-button 来插入一个 iframe。不幸的是，如果内容不可见，则 iframe 的大小将为 1。

第二次管理错误：我必须在我的隐藏内容上添加一个事件，以便处理生成的 twitter iframe 大小为 1 的情况。所以想法是添加一个新按钮并重新加载 twitter 小部件为了在内容可见时用 iframe 替换链接（我们使用 twttr.widgets.load(); 来做到这一点）。我们也只需要这样做一次，而不是每次这就是为什么我在插入内容和重新加载小部件之前对 iframe 宽度添加了一项检查。

$(".card").on('click',function()
var width=0;
// calculates largest width for the iframe
$('#collapseOne').find('.card-body').find('iframe').each(function()if (width < $(this).width()) width=$(this).width());
// we do the following only if there is no larger iframe for the tweet button
// otherwise there is a risk to insert more than one button in the page
if(width < 2) 
$('#collapseOne').find('.card-body').append('<a href="https://twitter.com/share" class="twitter-share-button" data-url="/myUrl" data-text="message" data-hashtags="myhashtag">Tweet</a>');
twttr.widgets.load();

);

感谢 @misorude 建议社区帖子和这篇帖子 Re-render Tweet button via JS，它帮助我重新加载了 twitter 小部件。