现在的位置: 网页制作教程网站制作经验 >正文
网页高级教程

iframe框架自适应高度 兼容各浏览器

发表于2016/12/23 网站制作经验 0条评论 ⁄ 热度 1,193℃

让iframe自适应高度,可以随着窗口的变化而跟着变大或变小。

这种自适应的效果可以让引用的网页风格保持一致,不至于iframe框架和窗口长宽大小不一。

我们首先设置css:

body{margin:0; padding:0;}

如果不设置body的margin和padding为0的话,页面上下左右会出现空白。

引用代码如下:

<iframe src="http://www.webym.net" id="myiframe" scrolling="no" frameborder="0"></iframe>

到目前为止,只是引用了框架,还没有自适应高度。

var ifm= document.getElementById("myiframe");
ifm.height=document.documentElement.clientHeight;

这个方法可以可以获取可视区域高度,但不能侦测浏览器窗口。也就是说只能获取到打开页面时的窗口高度,如果我们缩小了窗口,上面代码是不能动态获取。

所以我们要升级上面的代码。

<iframe src="http://www.webym.net" id="myiframe" scrolling="no" frameborder="0"></iframe>
<script type="text/javascript">
function changeFrameHeight(){
  var ifm= document.getElementById("myiframe");
  ifm.height=document.documentElement.clientHeight;
}
window.onresize=function(){
  changeFrameHeight();
}
</script>

window.onresize的作用就是当窗口大小改变的时候会触发这个事件。

通过这个方法,就可以让框架iframe完美自适应高度了,而且兼容各浏览器。

  • 暂无评论