文章目录

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自适应高度”的效果了。

本文网址:http://www.santii.com/article/112.html


数据更新时间:2018-11-14