Динамически меняющийся текст данных в викторе twitter

Question

Я генерирую контент для своей кнопки твитта, поскольку страница загружается, но даже когда у меня есть мой скрипт для запуска первого виджета.js по-прежнему выполняется до этого, я попытался использовать twttr.widget.load() для обновления значения, но это не сработало.

Возможно ли обновить значение кнопки Twitter после того, как она уже загружена изначально? Или сделать так, чтобы он инициализировался после загрузки содержимого?

Ниже приведен код, который я использую.

Я попытался разместить widget.js до и после моего скрипта в HTML тоже.

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

Я нашел способ сделать это, вот что вам нужно знать:

1) Там нет необходимости иметь кнопку щебета в исходном HTML (это будет только создайте дубликат, который вам нужно будет удалить позже).

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(); 

Поскольку он загружается асинхронно, я не знаю, нужно ли проверять перед вызовом метода загрузки , Я перезагружаюсь в течение нескольких минут и не обнаружил никаких проблем с этим, помните об этом, если ваша кнопка не загружается должным образом.

Answer 2

твиттера нагрузки виджет асинхронно.

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); 
     } 
    ); 
  } 
);