iframeタグとは

<IFRAME>はInline Frameの略です。<IFRAME>を使用すると、 <FRAMESET>のようにウィンドウを水平・垂直に分割する形式だけではなく、ウィンドウの中に独立して表示される形式のインラインのフレームが作成できます。
<IFRAME>タグは<BODY>～</BODY>内で使用します。 src属性でフレーム内に表示する内容を指定します。name属性でフレームに名前を付けることで、そのインラインフレームをリンクの表示先として指定することができます。

制作したもの

検証したこと

iframe内のスタイルとtop内のスタイルの!importantのどちらが優先されるのか検証
iframe内のリンクを押すと、iframe内のページ遷移をしiframeのbodyの高さ分要素の高さを変更

制作したコードについて

HTML

iframe外のhtml

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/top.css">
  <script src="./js/top.js" defer></script>
  <title>iframe - sample</title>
</head>
<body>
  <p>トップ</p>
  <div>
    <iframe class="js-iframe" src="./move/page1.html" frameborder="0"></iframe>
  </div>
  <p>テキスト</p>
</body>
</html>

iframe内のhtml(page1.html)

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="../css/page1.css">
</head>
<body>
  <p>page1</p>
</body>
</html>

iframe内のhtml(page2.html)

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="../css/page2.css">
</head>
<body>
  <p>page2</p>
</body>
</html>

CSS

iframe内のcss

p {
  color: #333 !important;
}

iframe外のcss(page1.css)

* {
  margin: 0;
  box-sizing: border-box;
}

.border {
  border: 1px solid #f0f
}

a {
  color: inherit;
}

p {
  color: #f00;
}

iframe外のcss(page2.css)

* {
  margin: 0;
  box-sizing: border-box;
}

.border {
  height: 100px;
  border: 1px solid #f00
}

a {
  color: inherit;
}

p {
  color: #00f;
}

JavaScript

// iframeのコンテンツの要素取得
function getIframeElem() {
  const elemIframe = document.querySelector('.js-iframe')
  return { elemIframe }
}

// iframeの要素の中にあるbodyの高さを取得
function getIframeHeight(elemIframe) {
  const iframeBodyHeight = elemIframe.contentWindow.document.body.clientHeight
  return { iframeBodyHeight }
}

// iframeの中にあるリンクタグの要素一覧を取得
function getElemIframeLink(elemIframe) {
  const elemIframeLinks = elemIframe.contentWindow.document.querySelectorAll('.js-link')
  return { elemIframeLinks }
}

// iframe内の要素をクリックした時の処理
function clickEvent(elemIframe) {
  elemIframe.addEventListener('load', loadEvent)
}

// ページが読み込まれた時の処理
function loadEvent() {
  const { elemIframe } = getIframeElem()
  const { iframeBodyHeight } = getIframeHeight(elemIframe)
  const { elemIframeLinks } = getElemIframeLink(elemIframe)
  elemIframe.height = iframeBodyHeight + 2 + 'px'
  elemIframeLinks.forEach(function(link) {
    link.addEventListener('click', clickEvent(elemIframe))
  })
}

window.addEventListener('load', function() {
  loadEvent()
}, false)

行ったこと

1. iframe内のスタイルとtop内のスタイルの`!important`のどちらが優先されるのか検証

/* ページ全体 */
p {
  color: #333 !important;
}

/* iframe内 */
p {
  color: #f00;
}

結果

結果として、iframe内のスタイルはページ全体のスタイルと競合しない

iframe外のpタグ

iframe内のpタグ

2. iframe内のリンクを押すと、iframe内のページ遷移をしiframeのbodyの高さ分要素の高さを変更

行いたいことは表題の通りだが、jsでの実行の手順については以下になります。

2-1. iframeの要素を取得

後々管理しやすいようにhtml側にjs-iframeのclass名を付与、js側で要素の取得

<iframe class="js-iframe" src="./move/page1.html" frameborder="0"></iframe>

// iframeのコンテンツの要素取得
function getIframeElem() {
  const elemIframe = document.querySelector('.js-iframe')
  return { elemIframe }
  /** 
   * 以下の結果になる
   *  <iframe class="js-iframe" src="./move/page1.html" frameborder="0"></iframe>
   */
}

ここまでで以下のような要素が取得されます。

2-2. iframe内にある`body`タグ・`a`タグの一覧の要素を取得

/** 
 * elemIframeについては`2-1`で取得したiframeの要素
 */

// iframeの要素の中にあるbodyの高さを取得
function getIframeHeight(elemIframe) {
  const iframeBodyHeight = elemIframe.contentWindow.document.body.clientHeight
  return { iframeBodyHeight }
  /** 
   * 以下の結果になる
   *  24
   */
}

// iframeの中にあるリンクタグの要素一覧を取得
function getElemIframeLink(elemIframe) {
  const elemIframeLinks = elemIframe.contentWindow.document.querySelectorAll('.js-link')
  return { elemIframeLinks }
  /** 
   * 以下の結果になる
   *  NodeList [a.js-link]
   */
}

HTMLIFrameElement.contentWindowを使用することで、iframe内のwindowオブジェクトにアクセスすることができます。

2-3. iframeの高さを変更

2-2で取得したiframeBodyHeightをiframeの高さに設定

// 今回の場合はiframe内のページ内のborder分もプラスしたいため、2pxの追加も行っている。
elemIframe.height = iframeBodyHeight + 2 + 'px'

2-4. `2-2`で取得したaタグにeventを追加

イベントを付与

elemIframeLinks.forEach(function(link) {
  link.addEventListener('click', clickEvent(elemIframe))
})

2-5. iframeのload時に処理を行う

// iframe内の要素をクリックした時の処理
function clickEvent(elemIframe) {
  elemIframe.addEventListener('load', loadEvent)
}

詰まったところ

1. `addEventListener`を意識しないと読み込み回数がおかしくなる

addEventListenerの第２引数を無名関数にすると複数回実行した時に処理が無駄に走ってしまう。

// NG
elemIframe.addEventListener('load', function() {
  loadEvent()
})
// OK
elemIframe.addEventListener('load', loadEvent)

NGの動き

OKの動き