如何解決此 Twitter JS 嵌入工廠錯誤？

Question

我一直在嘗試在網頁上嵌入推文列表，但它會產生此錯誤。 我相信我已經正確地遵循了 JS 工廠 function和widget.js的文檔。

我無法在其他地方找到類似的問題，Twitter 似乎沒有為此類問題提供任何文檔。

這是應該生成嵌入的網站部分：

<div id="tweet-container"></div>
<div>
  <script type="text/javascript" src="widgets.js"></script>
  <script type="text/javascript" src="organise.js"></script>
  <script type="text/javascript">
    organise({{ tweets | tojson }});
  </script>
</div>

組織.js：

function organise(tweetList){

  for (let i = 0; i < tweetList.length; i++) {

    var newDiv = document.createElement('div')
    newDiv.innerHTML = '<div id="video-${i}"'

    document.getElementById("tweet-container").appendChild(newDiv)

    twttr.widgets.createTweet(
      tweetList[i]["url"],
      document.getElementById(`video-${i}`),
      omit_script=true,
      {
        conversation: 'none',
        align: 'center',
        theme: 'dark'
        }
      )
      .then( function( el ) {
        console.log('Tweet added.');
    });
  }
}

和widgets.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 1

我不知道這是否記錄在任何地方。 我在提到這一點的 twitter 指南中找不到任何內容。

問題是twttr.widgets是undefined （我相信你已經意識到了）這對我來說似乎很奇怪，因為它告訴我twttr不是undefined 。 所以我想看看twttr是什么並且控制台記錄了它。

我注意到 object 上有一個ready方法，它需要一個回調，所以我嘗試了這個：

function organise(tweetList){
    twttr.ready(() => {
        console.log(twttr.widgets)
    })

// ..

現在widgets已定義！

因此，您需要在您提供給twttr.ready的回調中將代碼包裝在您的organise function 中。

例如，可能看起來像這樣：

function organise(tweetList){
    twttr.ready(() => {
        for (let i = 0; i < tweetList.length; i++) {
      
          var newDiv = document.createElement('div')
          newDiv.innerHTML = '<div id="video-${i}"'
      
          document.getElementById("tweet-container").appendChild(newDiv)
    
      
          twttr.widgets.createTweet(
            tweetList[i]["url"],
            document.getElementById(`video-${i}`),
            omit_script=true,
            {
              conversation: 'none',
              align: 'center',
              theme: 'dark'
              }
            )
            .then( function( el ) {
              console.log('Tweet added.');
          });
        }
    })
  }