77747


gatsby.jsで製作中のサイトにTwitterのツイートを埋め込もうとしています。

htmlの`<head>`で  
`<script async src="https://platform.twitter.com/widgets.js"
charset="utf-8"></script>`  
を読み込んでいてるのですが、どうすればこれの読み込み完了をjavascriptで検知できるでしょうか？

[code]

    const [tweetId, setTweetId] = useState()
    
    useEffect(() => {
      const container = document.getElementById("container")
      window.twttr.widgets.createTweet(tweetId, container)
    }, [tweetId])
    
    setTweetId(12345)
    
[/code]

上記のようなコードで、ページにツイートを埋め込んでいるのですが、「`window.twttr`が存在しません」みたいなエラーになります。

`window.twttr`というのは`widgets.js`がロード完了すると使えるようになる何かです。  
（DOMなのか何なのか理解していません。誰か知っていたら教えてください。）

  1. トップページ（ツイートを埋め込んでいない）にアクセスして、`widgets.js`を読み込ませる。
  2. サブページ（ツイートを埋め込んでいる）に移動。  
のような手順ならエラーになりません。ツイートが画面に表示されます。

widgets.jsさえ読み込めればツイートを表示できているので、`window.twttr.widgets.createTweet()`の部分のコード自体が間違っている訳ではないです。

いまのところ、`setInterval`で1秒ごとに`window.twttr`の存在確認をしているのですが、効率が悪いと感じています。

`addEventListener`などで`window.twttr`が利用可能になるまで待ち、`window.twttr.widgets.createTweet()`を実行させるにはどうすればいいでしょうか？


CC BY-SA 4.0
2021-06-23T08:38:07.520
77738
2021-06-23T16:29:36.273
2021-06-23T12:25:19.910
45540
45540
question
javascript reactjs ajax twitter gatsby
javascriptでwidgets.js(外部の.jsファイル)読み込み完了を検知するには？


ごく素直に、対象の`script`要素の`load`イベントで検知できるはずです。


CC BY-SA 4.0
2021-06-23T13:18:22.667
77745
2021-06-23T13:18:22.667
3475
77738
answer


Twitter Developer Platformでは、「最も信頼できる方法」としてwidgets.jsロード用のサンプルコードが紹介されています。  
<https://developer.twitter.com/en/docs/twitter-for-websites/javascript-
api/guides/set-up-twitter-for-websites>

[code]

    <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>
    
[/code]

このように`widgets.js`をロードした後、`twttr.ready`関数の引数にロード完了後実行したいコールバック関数またはアロー関数を投入すればツイートが表示されます。

[code]

        twttr.ready( () => twttr.widgets.createTweet("20",document.querySelector('div.container'))) ;
    
[/code]

ここまでがリンク先のドキュメントに記載されいてる内容です。

質問のようなコードの場面で使用するのであれば、`twttr.ready`関数の引数に`setTweetId`を実行するコールバック関数を設定すれば表示できるのではないかと思います。


CC BY-SA 4.0
2021-06-23T16:07:49.123
77747
2021-06-23T16:29:36.273
2021-06-23T16:29:36.273
3060
46944
77738
answer