More than 5 years have passed since last update.

frameで分割されたページに、frameのサイズを無視したdivを追加する

Last updated at 2016-10-16Posted at 2014-11-07

frameset + frameで分割されているページは、framesetがbodyの代わりになるようで、次のような構造になっています。

<html>
  <head></head>
  <frameset>
    <frame>
  </frameset>
</html>

</html>の直前にdivなどの要素を記述したとしても、画面描画時にブラウザがDOM上からその要素を消し去ってしまうようです。

そのため、通常はframeの分割を無視した要素（モーダルウインドウなど）を表示することができません。

画面描画時に、frame以外の要素を消してしまうので、jQueryをつかって、画面描画後に<html>に要素を追加してみたところ、ChromeとFirefoxでは表示できました（IEは未確認）。

追加する要素は、head内に次のように記述しておけば、ブラウザに消されてしまうこともありません。

<script id="foo-template" type="text/template">
// 表示したいHTMLをここに記述する
</script>

そして、次のように画面描画後にappendします。

$(function () {
  $('html').append($('#foo-template').html());
};

そもそも今どきframeが使われているサイトもなかなかないと思いますが（私もはじめて見た）、もしそんな掘り出し物なサイトに、モーダルウインドウ実装したいんだよね〜というような依頼があったときは、こんな感じでいけるかもしれません。たぶん。