###前提・実現したいこと
メニューをクリックするとiframe内が切り替わるようなサイトを作っています。
その際、下記ページを参考に
http://www.allinthemind.biz/markup/javascript/iframe.html
高さを自動で取得し設定されるようにしているのですが、
iframe内のページの情報が多い場合に、高さをきちんと取得できない状態になってしまいます。。
jsを記載しているのは大枠のhtmlの方になります。
###大枠のhtml
html
1<body> 2 <div class="frame"> 3 <iframe src="http://example.com/top/" name="mainframe"></iframe> 4 </div> 5</body>
###iframeのhtml
html
1 2<!--iframe--> 3<body> 4 <nav class="gnavi" id="nav"> 5 <ul> 6 <li class="nav01"><a href="http://example.com/top/">トップ</a></li> 7 <li class="nav02"><a href="http://example.com/event/">イベント</a></li> 8 <li class="nav03"><a href="http://example.com/about/">アバウト</a></li> 9 </ul> 10 </nav> 11 <div class="contents"> 12 </div> 13</body>
###js
javascript
1$(function() { 2$('iframe').on('load', function(){ 3 try { 4 $(this).height(0); 5 $(this).height(this.contentWindow.document.documentElement.scrollHeight); 6 } catch (e) { 7 } 8}).trigger('load'); 9});
###試したこと
メニューをクリックする度に上記を実行するなどをするべきな気がしているんですが、
書き方がよくわかっておらず。。。
アドバイスいただけると大変助かります!
回答1件
あなたの回答
tips
プレビュー