html iframe自适应高度 让浏览器兼容可随着窗口大小改变
关于今天的“iframe自适应高度”这篇文章,小编很久以前就有写过,不过是发表在另外的网站上面。
今天刚好又碰到这问题,把之前的都忘了,于是就又去百度搜索,没想到就找到了之前的文章。
稍微改动一下内容,再分享出来,要不然百度会说是采集的了。
在解决“iframe自适应高度”的问题之前,我们先说一下在其中遇到的问题。
1、当高度自适应的时候,窗口改变时会出现滚动条。
2、当窗口放大时,iframe并没有跟随自动改变大小,而是像一个大窗口包着一个小窗口一样。
为了让iframe看起来美观,就得让iframe自适应,说起来最苦的就是我们编程的了。
先来看看解决方法吧!
我们需要先设置样式:
body{margin:0; padding:0;}
如果不将body的margin和padding设置为0,页面显示的时候上下左右会出现几像素的空白。
然后就是下面的代码:
<iframe src="http://www.santii.com" id="myiframe" onload="changeFrameHeight()" frameborder="0"></iframe>
考虑到小伙伴们并不是全都有使用jquery,就直接用js讲解。
完整实例
html代码<style type="text/css">
body{margin:0;}
iframe{border:none; margin:0 0; width:100%;}
</style>
</head>
<body>
<iframe src="http://www.santii.com" id="myiframe" onload="changeFrameHeight()" frameborder="0"></iframe>
<script>
function changeFrameHeight(){
var ifm= document.getElementById("myiframe");
ifm.height=document.documentElement.clientHeight;
}
window.onresize=function(){
changeFrameHeight();
}
</script>
亲自测试一下 在上面的代码中我们使用了window.onresize,也就是当窗口大小改变的时候触发,然后去执行changeFrameHeight()函数。
在函数中,我们使用clientHeight获取可视区域的高度,再修改iframe的高度就达到“iframe自适应高度”的效果了。