gijiframe2.html

親フレーム枠のソース


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>iframeでフレームっぽいものを実現するサンプル</title>
  <style>
    body,
    div,
    iframe {
      display: block;
      margin: 0;
      padding: 0;
      height: 100%;
    }

    body {
      width: 100%;
      overflow: hidden;
    }

    #menu {float: left;}
    #cs {float: right;}
    iframe {position: absolute;}

    #menu iframe {
      left: 0;
      width: 20%;
    }

    #cs iframe {
      right: 0;
      width: 79%;
    }
  </style>
</head>
<body>

<div id="menu">
<iframe src="gijiframe1.html" name="menu" title="メニュー"></iframe>
</div>
<div id="cs">
<iframe src="gijiframe2.html" name="cs" title="コンテンツ"></iframe>
</div>

</body>
</html>

iframe要素のname属性値が、a要素等のtarget属性の対象となる。

gijiframe1.html内のa要素のtarget属性をcsとすれば、当該リンクは、name属性値がcsのインラインフレーム枠内に開かれる。