アプリケーション内に外部サイトを表示する方法（Angular）

はじめに

フロントエンド開発で、あるページに外部サイトを表示したいとの要望があった為その対応を行った。

実現方法

htmlのiframeタグを利用する事で、要望を実現する事ができる。

iframeとは、src属性で指定したURL（リンク先ページの内容）をインラインフレーム表示できるHTMLタグの一つです。

html4の頃は非推奨だったようですが、HTML5では非推奨が解除されているようです。

YouTube埋め込みやAmazonの商品リンクなど多く利用されているのも原因ですかね？。。

実装内容

該当の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>

// ヘッダーの高さを定義しているファイル
@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"をすると画面が固定になります。