Dynamically changing data-text on twitter widget

问题

I generate content for my tweet button as the page loads, but even when I have my script to run first widget.js still runs before, I tried using twttr.widget.load() to update the value but it didn't work.

Is it possible to update the value of the twitter button after it has already loaded initially? Or make it so it initializes after the content has loaded?

Below is the code I use.

I've tried placing widget.js before and after my script on the HTML too.

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>

回答1:

The twitter widget load asynchronously.

Twitter documentation

Loading the widgets.js file asynchronously will require you to wait before binding events

No matter your code is before or after the load widget line,

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

you have to wait that the widget is loaded.

Try this code

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

回答2:

I found a way to do it, here's what you need to know:

1) There's no need to have a twitter button in the initial HTML (this will only create a duplicate button that you'll need to delete later).

2) Simply create the button

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

And append it wherever you want it to be

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

After that all you need to do is reload the widget

twttr.widgets.load();

Since it loads asynchronously I don't know whether or not it's necessary to check before calling the load method, I've been reloading for a few minutes and haven't found any issues with it, keep this in mind if your button isn't loading properly.

来源：https://stackoverflow.com/questions/39812242/dynamically-changing-data-text-on-twitter-widget

标签

javascript

twitter