Question

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

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

Dynamically change Tweet Button "data-text" contents

对于一个烦人的小问题，提供的问题答案可以解决。如果我这样实现它，Tweet按钮会在更新（消失并显示）时闪烁，因为它是通过使用

从头开始呈现的

twttr.widgets.load();

有没有人知道如何实现同样的目标，但没有＆＃34;闪烁＆＃34;？

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将包含一个Tweet按钮，该按钮将是静态的（仅在页面加载时呈现）。 id =“share”的另一个div将包含Tweet按钮，每次发生某些事件时都会重新呈现（更新）。

在CSS中，我将两个div放在同一位置，并覆盖在固定位置顶部更改的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，还没有在其他浏览器上尝试过。

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

1 个答案: