与某些浏览器配合使用时，Tweet按钮不会出现

Question

我正在使用以下代码显示一个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上，大多数情况下，展开手风琴时会显示tweet按钮。在Internet Explorer和Firefox（我还没有Edge可以对其进行测试）上时，按钮的大小为1px。如果我使用开发人员工具为CSS中的按钮设置正确的大小，则会显示该按钮。 javascript完成了它的工作：脚本已加载，iframe包含了所有必需的代码，我从twitter网站上加载没有问题，我唯一的问题是计算出的CSS阻止了按钮的显示。

因此，即使按钮在开始时处于隐藏状态，我也在寻求显示该按钮的帮助。

编辑：下面的代码段试图说明我的问题。

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

Answer 1

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

.btn-o {
    width: 100% !important;
}

Answer 2

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

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

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

因此，您将需要使用特定于Firefox的CSS示例：

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

}

Answer 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推荐了社区帖子，并感谢此帖子https://api.dartlang.org/stable/2.0.0/dart-isolate/Isolate/spawnUri.html，这有助于我重新加载Twitter小部件。