iframe内のコンテンツの高さを取得するTweetこんにちは、@yoheiMuneです。最近のお仕事で、iframe内のコンテンツの高さを取得する機会があったので、実装方法をブログに書きたいと思います。何をしたいのかiframe内のコンテンツの高さを取得して、その高さをiframeタグ自体に設定したい、ということで実装しました。今回の案件では、iframe内のコンテンツの高さがブラウザの横幅によって変わるため、iframeタグの高さをCSSなど固定値で指定することができず、JavaScriptでページ表示時に動的に設定することにしました。今回の実装は、iframe内のコンテンツが、サイトと同一ドメインであることを想定しています。別サイトの場合にはセキュリティ制約により、JavaScriptからiframe内にアクセスできません。iframe内のコンテンツの高さを取得する実際の実装は以下の通りです。iframe内の高さを取得し、その高さをiframeタグに設定しています。'px';});ここでは、iframe内のwindowオブジェクトに対して、DOMContentLoadedイベントを監視し、ページの読み込みが終わった後に処理しています。iframe内の表示要素で画像などがあり、画像読み込みで高さが変わる場合には、DOMContentLoadedではなくloadイベントを監視するなど、対策が必要があります。DOMContentLoadedとloadの違いは、「onloadイベントより早いタイミングで実行されるDOMContentLoadedイベント」をご参照ください。最後にPCやスマホでコンテンツの高さが変わる中、iframe内の要素をスクロールすることなく表示したいという要望を実現するために、今回の実装を行いました。最後になりますが本ブログでは、フロントエンド、Python、PHP、サーバー、インフラ、Swift、Node.js、Java、Linux、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時の、解決の糸口に!」そんな目標でブログを書き続けています。引数が省略可能な関数定義の方法。JavaとJavaScriptとの比較もしてみました。JavaScriptでマウス座標やスクロール量を取得するもしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。Munesada)です。世の中をさらに便利に面白くをモットーにWeb界隈で活動しています。Now機械学習/AI/自然言語処理のホットな"今"をお届けするキュレーションメディアです。