jquery tab 内嵌 iframe 自适应高度

最新推荐文章于 2017-12-01 14:40:14 发布

sharpwave

最新推荐文章于 2017-12-01 14:40:14 发布

阅读量338

点赞数

文章标签： jQuery Java HTML ViewUI

本文链接：https://blog.csdn.net/sharpwave/article/details/83711077

版权

引入 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>