Bootstrap 模态弹出窗口中的 Twitter“推文按钮”未呈现

Question

我有一个 Razor Pages 应用程序，我希望用户能够从中发送推文。我浏览了here 的文档并从here 生成了新按钮的代码。

<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

如果我将生成的代码放在应用程序主要部分的任何位置，它似乎工作正常。

但是，如果我随后尝试将推文按钮放在它不会呈现的模态弹出正文中。

如果我只是删除生成代码的<script> 部分：

Anchor 显示为普通锚点，没有您在 <script> 中使用 widget.js 获得的任何其他功能。

之前有没有人遇到过这个或类似的问题，或者对可能导致问题的原因有任何想法？我已经研究了几天了，还没有走得太远。

Answer 1

尝试在模式打开时加载脚本。当链接被按钮替换时，您可能会发生布局变化。

document
  .getElementById("myModal")
  .addEventListener("show.bs.modal", async 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 = "https://platform.twitter.com/widgets.js";
        fjs.parentNode.insertBefore(js, fjs);
      }
    })(document, "script", "twitter-wjs");
  });

脚本略微改编自this answer。