在 twitter 小部件上动态更改数据文本

Question

我在页面加载时为我的推文按钮生成内容，但即使我让我的脚本运行第一个 widget.js 之前仍然运行，我尝试使用 twttr.widget.load() 来更新值但它没有没用。

是否可以在初始加载后更新 twitter 按钮的值？或者让它在内容加载后初始化？

以下是我使用的代码。

我也尝试在 HTML 上的脚本前后放置 widget.js。

text = quote[0].content.substring(3, quote[0].content.length - 5);
document.querySelector("#quote").innerHTML = text; 
document.querySelector(".twitter-share-button").setAttribute("data-text", text);
twttr.widgets.load(document.getElementById("tweet"));

HTML

    <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script>window.twttr = (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
    if (d.getElementById(id)) return t;
    js = d.createElement(s);
    js.id = id;
    js.src = "https://platform.twitter.com/widgets.js";
    fjs.parentNode.insertBefore(js, fjs);

    t._e = [];
    t.ready = function(f) {
        t._e.push(f);
        };

        return t;
    }(document, "script", "twitter-wjs"));</script>
<script src="script.js"></script>

Answer 1

twitter 小部件异步加载。

Twitter documentation

异步加载 widgets.js 文件将需要您在绑定事件之前等待

无论您的代码是在加载小部件行之前还是之后，

twttr.widgets.load(document.getElementById("tweet"));

您必须等待小部件加载完毕。

试试这个代码

twttr.ready(
  function (twttr) {
    twttr.events.bind(
      'loaded',
      function (event) {
        var text = quote[0].content.substring(3, quote[0].content.length - 5);
        document.querySelector("#quote").innerHTML = text; 
        document.querySelector(".twitter-share-button").setAttribute("data-text", text);
      }
    );
  }
);

Answer 2

我找到了一种方法，这是你需要知道的：

1) 在初始 HTML 中不需要有一个 twitter 按钮（这只会创建一个重复的按钮，您以后需要删除它）。

2) 只需创建按钮

var button = document.createElement('a');
button.classList += "twitter-share-button";
button.innerHTML = "Tweet";
button.setAttribute("data-text", text);
button.setAttribute("data-via", via);
button.setAttribute("href", "https://twitter.com/intent/tweet");

并将其附加到您想要的任何位置

document.querySelector(".quote").appendChild(button);

之后，您需要做的就是重新加载小部件

twttr.widgets.load();

由于它是异步加载的，我不知道在调用 load 方法之前是否需要检查，我已经重新加载了几分钟并且没有发现任何问题，如果你的请记住这一点按钮未正确加载。