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

Question

Firebug 控制台抛出错误。它声明我尝试用于跟踪社交事件的代码在 //platform.twitter.com/widgets.js 完成异步加载之前使用。

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

但是，我遵循了 Twitter 文档 (https://dev.twitter.com/web/javascript/events)，并将其包装在 twttr.ready() 周围，就像处理 Facebook 事件一样。

  <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>

有什么提示吗？

Answer 1

看来 twttr 还没有初始化。确保脚本 (//platform.twitter.com/widgets.js) 在您拥有的代码块之前加载。

这就是您未定义 (twttr) 的原因。

看到您的编辑后，很清楚发生了什么。您的脚本在页面加载后追加头部并加载脚本。在你执行依赖于你注入头部的东西的代码之后，它仍在加载，这就是 twttr 尚未初始化的原因。

尝试下面的代码块：

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

如果您想要跨浏览器支持，您可能需要按照他们在其功能中所做的工作，先检查 window.addEventListener，然后再回退到 window.attachEvent 以查看旧版浏览器。

Answer 2

对于那些遇到 'twttr is undefined' 问题的人，以下为我解决了...

在正文打开后包含此脚本，并确保从按钮嵌入中删除 widget.js 脚本 如果复制并粘贴。

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

Answer 3

嗯，我遇到了同样的问题，但我以不同的方式加载脚本。我将 twitter script 标签放在 angular 应用的 index.html 的 head 部分。但它有一个问题，它附加了 async 属性。去掉之后，脚本的加载不再是异步的，而是阻塞的，这是我的需求。

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

对于需要在 HTML 文档解析发生之前加载脚本的情况，删除 async 标签。

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

从这个来源获得的一些帮助：async-vs-defer