無駄にjQueryでiframeコンテンツを切り替え

JavaScript

タイトル通り。
無駄にjQueryを使ってフェードさせてるのと、全画面になるように。

デモ↓
http://2244.jp/_demo/jquery-loader/01/

JavaScript

<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript">
//初期化関連。
var windowWidth = 0;
var windowHeight = 0;

//とりあえずgoogleをiframeにセット。
var url="http://google.com/";
var iframe ='<iframe src ="'+url+'" frameborder="no" id="frame"></iframe>'

$(document).ready(function(){

	$("#main-navi li > a").click( function() {
		var src = $(this).attr("href"); 

		//フェードアウトして、iframeのソースかえて、フェードイン
		$("#main-contents").fadeTo(800,0.05,function(){
			$("#frame").attr("src",src).load(function() {
				$("#main-contents").fadeTo(800,1);
			});
		});
		return false; 
	});

	//iframe表示させてリサイズ。
	$("#main-contents").html(iframe);
	resize();

});

//iframeが画面いっぱいになるように。
function resize() {
	//IEの時の幅と高さを取得
	if(navigator.userAgent.indexOf("MSIE") > -1){
		windowWidth = document.documentElement.clientWidth;
		windowHeight = document.documentElement.clientHeight;
	}else{
	//IE以外の幅と高さを取得
		windowWidth = window.innerWidth;
		windowHeight = window.innerHeight;
	}
	
	//#contentsにスタイルで幅と高さを指定
	document.getElementById('frame').style.width = windowWidth + "px";
	document.getElementById('frame').style.height = windowHeight + "px";
}

window.onresize = resize;

</script>

HTML & CSS

<style>
body { margin: 0px; padding: 0px; }
#main-navi { position: absolute; top: 20px; z-index: 100; }
#main-navi li { color:#f00; padding-bottom:5px; }
#main-navi a { background: #ff0000;color: #fff; }
</style>

<body scroll="no">

<div id="main-navi">
<ul>
<li><a href="http://google.com/">Google</a></li>
<li><a href="http://youtube.com/">YouTube</a></li>
<li><a href="http://flickr.com">Flickr</a></li>
</ul>
</div>

<div id="main-contents"></div>

</body>

iframe切り替えだけなら、

<iframe name="フレーム名" 〜></iframe>
<a haref="リンク先" target="フレーム名">-</a>

で十分だよなぁ。
かつ、用途不明・・・。