Question

ReferenceError：即使使用 twttr.ready() 也会出现“twttr 未定义”的情况

2015-02-16

15591

javascript twitter

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 未定义”问题的人，下面的方法帮我解决了这个问题...

在正文打开后包含此脚本，并确保 从按钮嵌入中删除 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 标签放在我的角度应用程序的 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