本文介绍了一种使用JavaScript优化iframe内页面显示的技术，通过调整父级元素的样式来隐藏滚动条，同时确保iframe内的内容不会超出其容器。此方法适用于提升用户体验，减少页面布局混乱的问题。
外层html结构：
<html style="overflow:hidden;">
<ul>menu</ul>
<div id="content" style="overflow:hidden;"><iframe id="iframeid" src="xxx.html" /></div>
</html>
#加入到iframe页面的js,可以加入到js文件，其他文件引用。
完美解决iframe双滚动条显示
function resizeFrame(frameId,top-set,left-set) {
//document.body.style.overflow='scroll';
document.body.style.overflowX='hidden';
var parentDocEle = parent.document.documentElement;
$("html").add("body").css({"overflow-x:":"hidden","overflow-y:":"scroll"});
var newrectage ={'height':parentDocEle.clientHeight-top-set,'width':parentDocEle.scrollWidth-left-set};
var pcontent = parent.document.getElementById("content");
$(pcontent).css({'height':newrectage.height+'px','width':newrectage.width+'px'});
$(parent.document.getElementById(frameId)).css({'width':newrectage.width,'height':newrectage.height});
}
$(parent).resize(function() {
resizeFrame("iframeid",76,240);
});
$(parent).resize();
扫一扫
3475
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
