jquery tab 内嵌 iframe 自适应高度

引入 jqurey tab 的js

<link rel="stylesheet" type="text/css" href="<c:url value="/resource/css/jquery/ui/theme/smoothness/jquery-ui-1.8.2.custom.css" />"/>
<script type="text/javascript" src="<c:url value="/resource/js/jquery/core/jquery-1.4.2.js" />"></script>
<script type="text/javascript" src="<c:url value="/resource/js/jquery/ui/jquery.ui.core.js"/>"></script>
<script type="text/javascript" src="<c:url value="/resource/js/jquery/ui/jquery-ui-1.8.2.custom.js"/>"></script>
<script type="text/javascript" src="<c:url value="/resource/js/jquery/ui/jquery.ui.tabs.js"/>"></script>

在调用 tabs方法时  写 show 方法 在里面 动态改变 iframe 里的高度

$("#tabs").tabs({
	show:function(obj,tab){
	$(tab.panel).find('IFRAME').attr("height",tab.panel.scrollHeight);
	}
	});

html 页面 如下

<table width="100%" border=0 cellpadding="3" cellspacing="0" id="inboxTabTableId">
                    <tr>
                        <td valign="top" align="left">
                            <div id="tabs" class="formB">
                                <ul>
                                    <li><a href="#tabs-1" id="inboxTab1Title" rel="/inbox/outbox/?type=0">收到的信息（3）</a></li>
                                    <li><a href="#tabs-2" id="inboxTab2Title" rel="/inbox/outbox/?type=1">收到的邀请信息（2）</a></li>
                                </ul>
                                <div id="tabs-1">
                                    <table height="300" width="100%" border=0 cellpadding="3" cellspacing="0" >
                                        <tr>
                                            <td valign="top" >
                                            iframe1
                                                <iframe id="inboxTab1Content" name="frame1"  style="" frameborder="1" marginHeight="0" scrolling="no" onload="this.height=frame1.document.body.scrollHeight"  src1="<c:url value='/inbox/outbox'/>?random= + Math.random()" width="100%" height="100%"></iframe>                                                                          
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                                <div id="tabs-2" >
                                    <table height="300" width="500" border=0>
                                        <tr>
                                            <td valign="top" >
                                            iframe2
                                            <iframe id="inboxTab2Content" name="frame2" style="" frameborder="1" marginHeight="0" scrolling="no" onload="this.height=frame2.document.body.scrollHeight"  src1="<c:url value='/inbox/inviter'/>+'?random=' + Math.random()" width="100%" height="100%"></iframe>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </td>
                    </tr>
                </table>

评论

2 楼 haitaohehe 2011-04-09  

关键是tab.panel.scrollHeight取得的高度就不对啊。。 比如内容比较少时高度就比较小 不能填充右边界面啊。。

1 楼 caggeat 2011-02-12  

貌似ff不行呀