iframe heightの自動計測をjQueryでしたい

MakeShopの会員制サイト作成の為、イントロページ（TOPや商品ページ等とは完全に独立した干渉出来ないページ）に下記htmlの内容を組み込んでいます。

左サイドをクリックして右メイン部分にiframe id="brand"で呼び出した時に、中のコンテンツを自動で計算して高さを調節したく、

調べるといくつかjQueryのサンプルが出てきたので
いくつか試したのですが、動きません。

よろしくご教授下さい。

<html lang="ja">

<head>
	<meta charset="utf-8">
<style type="text/css">
@charset "utf-8";

/* common */
*{
	font-size: 14px;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}


a:link, a:visited{
	text-decoration:none;
	color:#555;
}

a:hover{
	text-decoration:none;
	color:#f39;
}

p{
	line-height: 1.5;
}



#wrap{
width : 912px;
height: 100%;
margin: auto;
border: solid 0px red;
}

#side{
width : 200px;
border: solid 0px #386386;
float:left;
padding:30px 0 0 0;
}

div.brt{
	background-color:#eee;
	color:#333;
	font-weight:bold;
	font-size:12px;
	line-height:16px;
	padding:8px 10px;
	text-align: center;
}

div.brt span{
	font-size:13px;
}

#side ul{
	margin: 0px;
	padding: 0px;
	list-style-type:none;
	width:200px;
}

#side ul li{
	display: inline;
	margin:0px 0px 0px 0px;
	padding:0px;
	border:0px;
	font-size:9px;
	line-height:130%;
}

#side ul li b{
	font-size:11px;
	line-height:120%;
}

#side ul li a{
	display: block;
	background-color: #fff;
	padding:5px 10px 3px 10px;
	text-decoration: none;
	margin: 0px;
	text-align: left;
	font-size: 8px;
	line-height:120%;
	border-bottom:solid 1px #eee;
}

#side ul li a:hover{
	background-color:#f7f7f7;
	border-bottom:solid 1px #eee;
}
#side li a:hover{
	border:solid 1px #fff;
	background-color:#fff;
	color:#f39;
}

#intromain{
width : 702px;
float:right;
}

#brand{
width:701px;
}


.clear{clear:both;}

a.kaiin {
	width: 690px;
	display: inline-block;
	text-align: right;
	color: #f39;
	background: #eee;
	padding: 2px 10px 0 0;
	margin: 5px 0 25px 0;
}

</style>
</head>
<body>





<div id="wrap">
<div class="brt">BRAND</div>
<!--▼サイド▼-->
<div id="side">




<div class="brt">ア</div>
<ul>



<li><a href="http://shopping.geocities.jp/store-goods/ecstation/showcase/oroshi_arcteryx.html" target="brand"><b>ARCTERYX</b><br>アークテリクス</a></li>

<li><a href="http://shopping.geocities.jp/store-goods/ecstation/showcase/oroshi_outdoor.html" target="brand"><b>OUTDOOR</b><br>アウトドア</a></li>

<li><a href="http://shopping.geocities.jp/store-goods/ecstation/showcase/oroshi_anello.html" target="brand"><b>ANELLO</b><br>アネロ</a></li>

</ul>

</div>
<!--▲サイド▲-->



<!--▼メイン▼-->
<div id="intromain" name="intromain">

<iframe src="http://shopping.geocities.jp/store-goods/ecstation/showcase/oroshi_anello.html" name="brand" id="brand" width="700" height="930" scrolling="auto" frameborder="0"></iframe>
<a href="" class="kaiin">
>>まずは会員登録へ</a>
<!--▲メイン▲-->
</div><!-- intromain -->
</div><!-- wrap -->

</div>

<!--▼問題個所▼-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script type="text/javascript">
        (function(window, $){
    $(window).on("load",function(){
        $('iframe.autoHeight').each(function(){
            var D = $(this).get(0).contentWindow.document;
/*
            console.log(
                D.body.scrollHeight, D.documentElement.scrollHeight,
                D.body.offsetHeight, D.documentElement.offsetHeight,
                D.body.clientHeight, D.documentElement.clientHeight
            );
*/
            var innerHeight = Math.max(
                D.body.scrollHeight, D.documentElement.scrollHeight,
                D.body.offsetHeight, D.documentElement.offsetHeight,
                D.body.clientHeight, D.documentElement.clientHeight
                );
            $(this).removeAttr("height").css('height', innerHeight + 'px');
        });
    });
})(window, jQuery);
    </script>
<!--▲問題個所▲-->
</body>
</html>