如何在不闪烁的情况下动态更改推文按钮？

Question

我正在尝试动态更新 Tweet 按钮，以便每次发生某些事件时都会发布不同的文本（如果按下 Tweet 按钮）。

实际上，我想要达到的目标与以下问题中描述的相同：

Dynamically change Tweet Button "data-text" contents

并且针对该问题提供的答案可以解决一个烦人的小问题。如果我这样实现它，Tweet 按钮在更新时会闪烁（消失和出现），因为它是使用从头开始呈现的

twttr.widgets.load();

有没有人知道我如何在没有“闪烁”的情况下实现相同的目标？

Answer 1

我最终解决这个问题的方式是这样的。

在html文件中我一个接一个地定义了两个div：

<div id="share_fixed">
  <a class="twitter-share-button" href="http://twitter.com/share" data-url=" " data-size="large" data-show-count="false" data-text=" ">
  </a>
</div>
<div id="share">
</div>

id="share_fixed" 的 div 将包含一个静态的推文按钮（仅在页面加载时呈现）。 另一个 id="share" 的 div 将包含 Tweet 按钮，该按钮将在每次发生某些事件时重新呈现（更新）。

在 CSS 中，我将两个 div 放置在同一位置，并覆盖在固定位置上发生变化的那个：

#share {
  position: absolute;
  bottom: 12px;
  left: 15px;
  z-index: 1;
}

#share_fixed {
  position: absolute;
  bottom: 12px;
  left: 15px;
  z-index: 0;
}

这实际上将强制固定的“虚拟”推文按钮始终位于在重新加载时更改并闪烁的按钮下方。每当顶部的按钮发生变化并“闪烁”下方的按钮时，它就会保留下来，因为它完全相同，所以看起来没有任何变化。

在 Javascript 文件中，我添加了例如像这样：

var tweetBtn = $(document.createElement('a')).addClass("twitter-share-button")
          .attr('href', 'http://twitter.com/share')
          .attr('data-url', ' ')
          .attr('data-size', 'large')
          .attr('data-show-count', 'false')
          .attr('data-text', "Some new tweet text");
$("#share iframe").remove();
$("#share").append(tweetBtn);

twttr.widgets.load();

我想有更多的方法可以解决这个问题，但是这在 Chrome 上对我有用，在其他浏览器上没有尝试过。