在Twitter小部件上動態更改數據文本

Question

我會在頁面加載時為tweet按鈕生成內容，但是即使我的腳本要首先運行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文檔

異步加載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方法之前進行檢查，因此我已經重新加載了幾分鍾，並且沒有發現任何問題，如果您的按鈕不正確，請記住這一點。正確加載。