在开发中出现一个iframe双滚动条问题,查了很多资料,网上的解决方案是定义iframe的onload事件,加载时重新加载高度,但是由于项目中页面渲染完成后,点击按钮动态生成数据,这时候上面的方案就不可行了。
下面是通过jquery.layout.js来解决双滚动条问题。
html代码
- <body >
- <div id="mainFrameDiv" class="tabqh ui-layout-north">
- <div class="menu">
- <ul id="tabs">
- <div id="liText"><div>
- </ul>
- </div>
- </div>
- <div class="ui-layout-center" >
- <iframe src="" frameborder="0" id="bottom_frame" name="bottom_frame" width="100%"
- height="100%"></iframe>
- </div>
- </body>
同时引入下面js文件
<script type="text/javascript" src="<%=request.getContextPath()%>/jquery/plugin/layout/jquery.layout.js"></script>
在初始化时执行
- $(document).ready(function () {
- $('body').layout({
- north: {
- size:40,
- spacing_open:0,
- closable:false,
- resizable:false
- },
- center: {
- size:20,
- spacing_open:0
- }
- });
- })
下面是效果图