iframeでTwitterの埋め込みコンテンツの描画後に、画面表示する方法
結論
iframe.contentWindow から twttr オブジェクトを見つけて、event.bind("rendered", () => {}) の第二引数に、表示処理を書くことです。
iframe.addEventListener("load", () =>
iframe.contentWindow.twttr.events.bind("rendered", () =>
iframe.setAttribute("style", "opacity: 1;")
)
);背景
https://twitter.com/openwc/status/1427617679427440643 のような URL から、埋め込みコンテンツをブログサイトなどに表示したいです。
https://publish.twitter.com/oembed?url=${URL} のレスポンスの中の html が、埋め込みコンテンツになります。
これを iframe の srcdoc に設定することで、埋め込みコンテンツを表示することができます。
<iframe></iframe>/*
const url = "https://twitter.com/openwc/status/1427617679427440643";
const oembedUrl = `https://publish.twitter.com/oembed?url=${url}`;
// response.html of `fetch(oembedUrl)` is html.
*/
const html =
'<blockquote class="twitter-tweet"><p lang="en" dir="ltr">`npm init @open-wc` now supports lit v2!<br /><br />Give it a try and let us know what you think<a href="https://t.co/9191LFIYHZ">https://t.co/9191LFIYHZ</a></p>— Open Web Components (@OpenWc) <a href="https://twitter.com/OpenWc/status/1427617679427440643?ref_src=twsrc%5Etfw">August 17, 2021</a></blockquote>\n<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>\n';
const iframe = document.querySelector("iframe");
iframe.setAttribute("srcdoc", html);課題
iframe で srcdoc を読み込んだ後、埋め込みたい Tweet の文字列だけが、チラっと見えてしまいます。
下の例であれば、npm init @open-wc now supports lit v2! がチラっと見えるはずです。reload をしてみると分かります。
チラっと見えてしまうのを阻止したいです。
解決
埋め込みコンテンツの描画後イベント rendered というものがあります。これを使います。
実装の順番は、次のとおりです。
- iframe から、
loadイベントを検知 iframe.contentWindowから、twttrオブジェクトを見つけるtwttr.events.bind("rendered", () => {})で、描画後の処理を書く
実際に、コードを書くと、次のとおりです。
/*
const url = "https://twitter.com/openwc/status/1427617679427440643";
const oembedUrl = `https://publish.twitter.com/oembed?url=${url}`;
// response.html of `fetch(oembedUrl)` is html.
*/
const html =
'<blockquote class="twitter-tweet"><p lang="en" dir="ltr">`npm init @open-wc` now supports lit v2!<br /><br />Give it a try and let us know what you think<a href="https://t.co/9191LFIYHZ">https://t.co/9191LFIYHZ</a></p>— Open Web Components (@OpenWc) <a href="https://twitter.com/OpenWc/status/1427617679427440643?ref_src=twsrc%5Etfw">August 17, 2021</a></blockquote>\n<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>\n';
const iframe = document.querySelector("iframe");
iframe.addEventListener("load", () =>
iframe.contentWindow.twttr.events.bind("rendered", () =>
iframe.setAttribute("style", "opacity: 1;")
)
);
iframe.setAttribute("srcdoc", html);html は、styleで隠しておきます。(手段は問いません)
<iframe style="opacity: 0;"></iframe>解決した結果が、こちらです。
npm init @open-wc now supports lit v2! のチラっとが見えなくなっているはずです。
-
コメント
0
読み込み中...
シェアする
フォローする
購読する
関連する記事
タグ「サービス」の記事
どうも、Web業界で働き始めて9年目の駆け出しエンジニア、silverbirderです。Spotifyで音楽を聴いていると「この曲、どこかで聞いたことがあるけど、何の主題歌だったかな？」と思うこと、ありませんか？特にドライブ中や作業中に、ふと気になることが多いですよね。 私もそんな経験があり、気になったその曲が主題歌だったアニメを見始めたことがきっかけで、「簡単にタイアップ情報（アニメやドラマなど）を調べられるアプリがあったら便利だな」と思い、このアプリを作ることにしました。
TikTokへスクレイプするバッチをGCP上で構築しました。GCP構築のシステム設計話と、その構築時に、ハマったことを共有します。
みなさん、Zoom使っていますか？ ZoomのMeetingを自動生成するGASライブラリを公開しましたので、そのきっかけと使い方について紹介しようと思います。
タグ「フロントエンド」の記事
AI にコードを書かせた後、余計なコードを見つけて消す作業があります。 不毛なことなので、それらの作業を減らすためのお作法を紹介します。 未使用コードを消す 以下でも書きましたが、未使用コードの検査に knip を使うことが多いです。 ht
最近、iframeを使っています。 クライアントサイドで埋め込む想定で、iframeを使おうとしています。 色々と苦労したことがあったので、書いて残しておこうと思います。 レスポンスヘッダー 前提として、ウェブアプリケーションをプロダクショ
紙を積んだイラストをSVGで書こうとしていました。 （当たり前ですが）図形を表現するためには数学の知識が必要で、学生の頃の記憶を思い出したので疲れました。 所感について、諸々書こうと思います。 成果物 実際に完成したのは、以下の画像ができま
2026年02月17日