Dynamisch ändern Daten-Text auf Twitter-Widget

Question

Ich erzeuge Inhalt für meine Tweet-Schaltfläche, wie die Seite geladen wird, aber auch wenn ich mein Skript zuerst Widget.js ausgeführt wird noch läuft, habe ich versucht mit twttr.widget.load() um den Wert zu aktualisieren, aber es hat nicht funktioniert.

Ist es möglich, den Wert der Twitter-Schaltfläche zu aktualisieren, nachdem sie bereits geladen wurde? Oder machen Sie es so, dass es initialisiert wird, nachdem der Inhalt geladen wurde?

Unten ist der Code, den ich verwende.

Ich habe versucht, widget.js vor und nach meinem Skript auf dem HTML zu platzieren.

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

ich einen Weg, hier zu tun gefunden, was Sie wissen müssen:

1) Es gibt keine Notwendigkeit, einen Twitter-Button in der anfänglichen HTML haben (dies wird Erstellen Sie nur eine doppelte Schaltfläche, die Sie später löschen müssen.

2) Erstellen Sie einfach die Taste

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

Und es anhängen, wo Sie es

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

Danach alles, was Sie tun müssen, um sein wollen

twttr.widgets.load(); 

Das Widget ist nachladen

Da es asynchron lädt, weiß ich nicht, ob es notwendig ist, vor dem Aufruf der Load-Methode zu prüfen Ich habe ein paar Minuten neu geladen und habe keine Probleme damit gefunden, behalte dies im Hinterkopf, wenn dein Button nicht richtig geladen wird.

Answer 2

Die Last twitter Widget asynchron.

Twitter documentation

Laden der widgets.js asynchron Sie benötigen Datei vor dem Binden Ereignisse warten

Egal Code vor oder nach der Last-Widget Linie,

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

müssen Sie warten, dass das Widget geladen ist.

diesen Code Versuchen

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