ウェブサイト用 Twitter を組み込む場合、大抵は設定のドキュメントに記載されている推奨の埋め込みコードを使用するでしょう。 しかし、Twitterのウィジット JavaScriptがボタンやウィジットに変換するHTML エレメントを見つけるために行うページDOMのスキャンを、どのようにしてどのタイミングで実施するかを最適化したいと思うことでしょう。
コンテンツをページに動的に挿入している場合 (読み込みに時間がかかるコンテンツやpushState
技術を使って記事間をナビゲートしているなど)、
ボタンとウィジットを新規に設置するためには、twttr.widgets.load()
関数を使用してTwitterのウィジット JavaScript スキャンをリクエストする必要があります。
twttr.widgets.load()
引数を設定せずに呼び出した場合、 widgets-js
は初期化されていないウィジットを探すためにdocument.body
の DOM ツリー全てを検索します。
パフォーマンスを良くするために、HTMLElement
オブジェクトかHTMLElement
オブジェクト配列のどちらかを渡して、検索をこれらエレメントの子要素のみ制限します。
一つのエレメント内でウィジットを初期化する例:
twttr.widgets.load( document.getElementById("container") );
エレメントの配列内でウィジットを初期化する例:
twttr.widgets.load( document.getElementsByClassName("containers") );
Initializing embedded content after a page has loadedMost Twitter for Websites integrations will be well served by the recommended embed code found in the set-up documentation, but you may want to optimize how and when Twitter’s widgets JavaScript widgets scans the page DOM to discover new HTML elements eligible for enhancement into buttons or widgets. If content is dynamically inserted into a page (such as lazy-loading content or using a twttr.widgets.load() Called without argument, Example initializing widgets within a single element: twttr.widgets.load( document.getElementById("container") ); Example initializing widgets within an array of elements: twttr.widgets.load( document.getElementsByClassName("containers") ); |