iframeを使ってアプリケーション内に外部サイトを表示する
はじめに
フロントエンド開発で、あるページに外部サイトを表示したいとの要望がありiframe(インラインフレーム)を利用して対応を行ったのでその内容を記録しておきます。
iframe(インラインフレーム)とは...
iframeとは、HTMLタグの中にさらに別のファイルを埋め込むことができる要素を指します。
src属性で指定したURL(リンク先ページの内容)をインラインフレーム表示できるHTMLタグの一つです。
html4の頃は非推奨だったようですが、HTML5では非推奨が解除されているようです。
実装内容
localhost:4200でアクセスしたページ内にAngularドキュメントページを表示させていきたいと思います。 該当のhtmlファイルを以下のように編集します。
// Angularを利用してヘッダー部分を表示する為に利用しています。 <app-service-header [serviceName]="serviceName" [serviceCategory]="serviceCategory" (onClickedClear)="backToTop()" > </app-service-header> // ※外部サイト表示箇所 <div class="iframe-container"> <iframe src="https://angular.jp/" frameborder="0" ></iframe> </div>
css // ヘッダーの高さを定義しているファイル @import "../../assets/styles/const.scss"; .iframe-container { height: calc(100% - #{$service-header-height}); iframe { width: 100%; height: 100%; } }
上記のようにする事で、localhost:4200でアクセスしたページ内にAngularドキュメントページを表示させる事に成功しました。
おまけ
iframeのborderやスクロールバーを削除するには、scrolling="no"、frameborder="no"を利用します。scrilling="no"をすると画面が固定になります。