iframeを組み込んだHTMLの画面で、動的にiframeのheightとwidthを変えたい時があります。
２カラムの左メニュー固定で右コンテンツiframeで作るなどの時、解像度を変更した場合や、２画面で解像度が違った場合に移動した瞬間にリサイズしたいなどです。
ここでは、そのように動的にiframeのheightとwidthを変更したい場合のjavaScriptとjQueryを使用した方法をメモとして記載したいと思います。
目次
前提条件
- Firefox 21
- jQuery1.8.3
実装方法
<!DOCTYPE HTML>
<html lang="jp">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var onResize = function() {
$("body").css("height", document.documentElement.clientHeight).css("width", document.documentElement.clientWidth);
$("iframe").css("height", document.documentElement.clientHeight);
var point = parseInt($("#side-menu").css("width").replace("px", ""));
$("#contents").css("width", document.documentElement.clientWidth - point);
};
onResize();
$(window).resize(onResize);
});
</script>
</head>
<body style="overflow: hidden;">
<iframe id="side-menu" style="float:left;width:200px;" src="" frameborder="0" scrolling="yes"></iframe>
<iframe id="contents" style="float:right;" src="http://rikutoto.blogspot.jp/" frameborder="0" scrolling="yes"></iframe>
</body>
</html>
実装結果
上記のコードで実行すると以下のようになる。解像度を変更しても自動リサイズが入りレイアウト崩れは起きないということになります。
 |
| 動的画面サイズ変更の結果画面 |
0 コメント:
コメントを投稿