iframe框架嵌套页面(全屏,页面上下左右有空白,去双滚动条)
Posted opsprobe
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了iframe框架嵌套页面(全屏,页面上下左右有空白,去双滚动条)相关的知识,希望对你有一定的参考价值。
今天使用iframe框架,遇到了嵌套页面内容不全屏,页面上下左右有空白,出现双滚动条等情况,通过网上查阅,最终解决,在此做个记录。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的创意-我的创意记录</title>
<style type="text/css">
html{ /* 解决页面会出现双滚动条问题。overflow: hidden; 溢出隐藏,给一个元素中设置overflow: hidden,那么该元素的内容若超出了给定的宽度和高度属性,那么超出的部分将会被隐藏,不占位。 */
overflow: hidden;
}
body{ /* 解决页面上下左右会出现空白问题。让外框的外边距和内边距都为0 */
margin: 0;
padding: 0;
}
#iframepage{
width: 100%;
}
</style>
</head>
<body>
<iframe src="嵌入的页面链接" id="iframepage" scrolling="auto" onload="changeFrameHeight()" frameborder="0"></iframe>
<!-- 以下JS部分是让iframe自适应高度,兼容多种浏览器 -->
<script type="text/javascript">
function changeFrameHeight(){
var ifm= document.getElementById("iframepage");
ifm.height=document.documentElement.clientHeight;
}
window.onresize=function(){
changeFrameHeight();
}
</script>
</body>
</html>
参考文章:
(1)https://www.bbsmax.com/A/1O5E8vRbJ7
(2)https://blog.csdn.net/alex8046/article/details/51456131
以上是关于iframe框架嵌套页面(全屏,页面上下左右有空白,去双滚动条)的主要内容,如果未能解决你的问题,请参考以下文章
iframe框架嵌入一个网页,在微信里面打开不显示内容,一片空白,在其他浏览器都正常,紧急求助,在线等!