iframe出现双层滚动条解决方案

最新推荐文章于 2022-12-13 15:34:24 发布

lipengxs

最新推荐文章于 2022-12-13 15:34:24 发布

阅读量750

点赞数 1

分类专栏： web前端文章标签： jquery 双滚动条 iframe ViewUI

本文链接：https://blog.csdn.net/lp19861126/article/details/88336451

版权

web前端专栏收录该内容

39 篇文章 0 订阅

订阅专栏

在开发中出现一个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文件

在初始化时执行

$(document).ready(function () { 
       $('body').layout({
			north: {
					size:40,
					spacing_open:0,
					closable:false,
					resizable:false
			},
			center: {
					size:20,	
					spacing_open:0
			}
		});
}）

下面是效果图