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

一笠风雨任生平

发布于 2019-08-02 10:59:41

2.7K0

发布于 2019-08-02 10:59:41

文章被收录于专栏：服务化进程服务化进程

在开发中出现一个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
			}
		});
}）

下面是效果图

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

jquery