iframeとobjectの違いを徹底解説！使い分けの基準と実例で迷わない選択法

---

iframeとobjectの違いを知ろう

iframeとはHTMLの要素で、別のURLのページを現在のページの中に表示する仕組みです。ブラウザはiframeの中を独立した文書として扱い、親ページとは別のドキュメントツリーを持ちます。読み込まれたページのスクリプトは親ページのスクリプトとは別のオリジンポリシーの影響を受け、親から自由に中身へアクセスすることはできません。これがセキュリティの基本です。iframeを使う典型的な場面は、外部のウェブページを自分のサイトの一部として表示したいとき、広告枠として他社のページを表示するとき、地図や動画プレーヤーなどの機能を窓の中に格納するときなどです。枠の中身は外部ページそのものなので、表示の見た目は外部ページ次第です。もう一つのポイントは「サイズと表示の一体感」です。iframeの枠は通常HTMLの一部として表示され、枠の中身は別のページです。読み込み元のURLが変わると中身も切り替わります。
このようにiframeは手軽ですが、注意点も多いです。外部ページのデザインが自分のページのCSSに影響を与えることはなく、逆に自分のページのスタイルがiframe内のページへ影響しにくいという性質があります。したがって外部ページの見た目を完璧に揃えたい場合には工夫が必要です。すべてのケースで、外部コンテンツを内側に置く“窓”として考えると使い勝手が見えてきます。
一方でobjectはHTMLの要素の一つで、データの埋め込みを行うための汎用的な枠組みです。昔からある仕組みで、データファイルやプラグイン型コンテンツを表示するのに使われます。例えばPDFファイルやSVG、動画ファイル、あるいはプラグインを使うべき古い技術の埋め込みにも対応します。objectは「データの種類」を指定して埋め込み先を決める性質があり、data属性やtype属性を組み合わせて使います。これはiframeとは違い、埋め込む内容の扱い方が変わることを意味します。
この章の要点は次のとおりです。iframeは外部ページをそのまま窓として表示するのに適する、objectはデータやリソースの埋め込み全般に対応する汎用枠という二つの考え方を軸に覚えることです。さらに両者には長所と短所があり、用途に応じて使い分けることが大切です。

able>特徴iframeobject 用途別URLのページを表示する窓データやリソースを埋め込む枠 セキュリティ同一オリジンポリシーの影響を受けやすいデータの種類に応じた埋め込みが多い 可変性外部ページの変更に左右されやすい埋め込むデータ次第で表示が安定する

iframeの特徴と使い方のポイント

iframeは実務でよく使われますが、使い方次第でページの挙動が変わります。まず第一に、読み込む外部ページの同一-origin policyの影響を理解すること。iframe内の文書には親ページと同じJavaScript権限があるわけではなく、通常は別オリジンとして扱われます。そのため、iframe内のスクリプトから親ページのDOMを直接操作することはできません。これを回避するにはpostMessageの仕組みを用いた通信を使います。次にサイズの調整です。iframeはデフォルトだと固定サイズで表示されがちですが、レスポンシブデザインを実現するにはCSSで幅を100%に、高さを適切な比率で設定する工夫が必要です。方法としては、親要素の比率を維持するラッピングや、JavaScriptで中身の高さを取得してリサイズする方法があります。
またセキュリティ面でも重要です。外部サイトを窓として表示する場合、第三者の悪意あるページが読み込まれるリスクを考慮します。sandbox属性を使って機能を制限する、allow属性で許可する機能を絞るなどの対策が一般的です。これにより、iframe内の悪意あるコードが親ページへ影響を与える可能性を減らせます。実務では外部提供元が信頼できるかどうかの判断が特に大切です。

さらにobjectの使い方のポイントとして、PDFの埋め込みや動画の表示、SVGの表示など、データ形式を正しく指定すればうまく表示できます。
iframeと比べると、iframeは表示窓としての機能に特化、objectはデータ埋め込みの幅が広いという違いが明確になります。今後のウェブ開発では、これらの特性を踏まえて組み合わせる場面も多くなるでしょう。

ピックアップ解説

koneta: 友人と雑談風に話すならこうなるよ。『iframeってさ、外部のページを窓みたいに開くやつ。中身は別物のページだから、自分のページの雰囲気を壊さずに外部の情報を取り込みたいときに便利。ただし窓の中の人が何をするかは外部次第だから、細かい制御は難しいことがあるんだ。反対にobjectはデータを箱に押し込む感覚。PDFや動画、SVGなんかをひとまとめに表示するのに向いていて、どんなデータを入れるかで見え方が変わる。用途をはっきり分けて使えば、ページの安定性が上がる。』

---