ReferenceError: “twttr is not defined” even while using twttr.ready()

问题

Firebug console throws an error. It states that the code which I'm trying to use for tracking social events is used before //platform.twitter.com/widgets.js has finished loading asynchronously.

ReferenceError: twttr is not defined twttr.ready(function (twttr) {

However, I followed Twitter documentation ( https://dev.twitter.com/web/javascript/events ), and wrapped it around twttr.ready(), in the same way one does with Facebook events.

  <script type="text/javascript">   //load social sharing buttons async
    (function(w, d, s) {
      function go(){
        var js, fjs = d.getElementsByTagName(s)[0], load = function(url, id) {
          if (d.getElementById(id)) {return;}
          js = d.createElement(s); js.src = url; js.id = id;
          fjs.parentNode.insertBefore(js, fjs);
        };
        load('//connect.facebook.net/en_US/all.js#appId=1111111111111111&xfbml=1', 'fbjssdk');
        load('https://apis.google.com/js/plusone.js', 'gplus1js');
        load('//platform.twitter.com/widgets.js', 'tweetjs');
      }
      if (w.addEventListener) { w.addEventListener("load", go, false); }
      else if (w.attachEvent) { w.attachEvent("onload",go); }
    }(window, document, 'script'));
</script>  

<script type="text/javascript">
        window.fbAsyncInit = function() {
              FB.Event.subscribe('edge.create', function(targetUrl) {
              ga('send', 'social', 'facebook', 'like', targetUrl);
            });
              FB.Event.subscribe('edge.remove', function(targetUrl) {
              ga('send', 'social', 'facebook', 'unlike', targetUrl);
            });
        }
        twttr.ready(function (twttr) {
         twttr.events.bind('tweet', function(e){
          if(!e) return;
          ga('send', 'social', 'twitter', 'tweet', theURL);
         })
        });
    </script>

Any hints?

回答1:

It appears that twttr is not initialized yet. Make sure the script (//platform.twitter.com/widgets.js) is loading before the block of code you have.

This is the reason you're getting undefined (twttr).

After seeing your edits, it's quite clear what is happening. Your scripts are appending the head and loading the scripts after the page is loading. Right after you're executing code that depends on the stuff you've injected into the head and are still loading which is why twttr is not initialized yet.

Try this code block below:

window.addEventListener("load", function() {
    window.fbAsyncInit = function() {
        FB.Event.subscribe('edge.create', function(targetUrl) {
            ga('send', 'social', 'facebook', 'like', targetUrl);
        });
        FB.Event.subscribe('edge.remove', function(targetUrl) {
            ga('send', 'social', 'facebook', 'unlike', targetUrl);
        });
    }

    document.getElementById('tweetjs').addEventListener('load', function() {
        twttr.ready(function (twttr) {
            twttr.events.bind('tweet', function(e){
                if(!e) return;
                ga('send', 'social', 'twitter', 'tweet', theURL);
            })
        });
    }, false);
}, false);

If you want cross browser support, you may want to follow what they did in their function to check for window.addEventListener first, and then fall back to window.attachEvent for older browsers.

回答2:

For those experiencing issues of 'twttr is undefined', the following solved it for me...

Include this script after the body opening and make sure you remove the widget.js scripts from your button embeds if copied & pasted over.

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

回答3:

Well I was having the same issue but I was loading the script in a different way. I was placing the twitter script tag in the head section of my index.html of my angular app. But it had one problem, it had async attribute attached to it. After removing it, the loading of the script was no longer asynchronous but a blocking one, which was the requirement for me.

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

For cases where it is necessary for the script to load before the HTML document parsing happens remove the async tag.

<script src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Some help taken from this source: async-vs-defer

来源：https://stackoverflow.com/questions/28550328/referenceerror-twttr-is-not-defined-even-while-using-twttr-ready

标签

javascript

twitter