gatsby.jsで製作中のサイトにTwitterのツイートを埋め込もうとしています。
htmlの<head>
で
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
を読み込んでいてるのですが、どうすればこれの読み込み完了をjavascriptで検知できるでしょうか?
const [tweetId, setTweetId] = useState()
useEffect(() => {
const container = document.getElementById("container")
window.twttr.widgets.createTweet(tweetId, container)
}, [tweetId])
setTweetId(12345)
上記のようなコードで、ページにツイートを埋め込んでいるのですが、「window.twttr
が存在しません」みたいなエラーになります。
window.twttr
というのはwidgets.js
がロード完了すると使えるようになる何かです。
(DOMなのか何なのか理解していません。誰か知っていたら教えてください。)
- トップページ(ツイートを埋め込んでいない)にアクセスして、
widgets.js
を読み込ませる。 - サブページ(ツイートを埋め込んでいる)に移動。
のような手順ならエラーになりません。ツイートが画面に表示されます。
widgets.jsさえ読み込めればツイートを表示できているので、window.twttr.widgets.createTweet()
の部分のコード自体が間違っている訳ではないです。
いまのところ、setInterval
で1秒ごとにwindow.twttr
の存在確認をしているのですが、効率が悪いと感じています。
addEventListener
などでwindow.twttr
が利用可能になるまで待ち、window.twttr.widgets.createTweet()
を実行させるにはどうすればいいでしょうか?
widgets.js
のロードが完了した時にしか存在しない何かを定期的にチェックしてみるとかの工夫を考えるか、そもそもそういう個々のスクリプトファイルがロードされた時点を知る必要が無い処理や仕組みを考えてみては?async=true
の設定が効いているかどうかは不明)。