龙空技术网

在建网站时如何让iframe在浏览器中自适应高度呢?

三七一网络 28

前言:

而今各位老铁们对“js设置图片高度适应屏幕”大约比较注重,同学们都想要了解一些“js设置图片高度适应屏幕”的相关知识。那么小编在网络上搜集了一些对于“js设置图片高度适应屏幕””的相关知识,希望小伙伴们能喜欢,姐妹们一起来了解一下吧!

  建企业网站时为什么需要使用iframe自适应高度呢?其实就是为了美观,要不然iframe和窗口长短大小不一,看起来总是不那么舒服,自适应高度对于用户体验度的提升尤为重要。网上关于iframe高度自适应的代码有很多,但比较杂乱,有一些过于复杂,有一些存在明显错误。缘由心生给出了一段修改后的精简版本,感觉不错,并简单修正了其中一处Opera下的错误。

iframe框架自适应高度
首先设置样式:body{margin:0; padding:0;}
如果不设置body的margin和padding为0的话,页面上下左右会出现空白。

html代码如下:<iframe src="; id="myiframe" scrolling="no" onload="changeMyFrameHeight()"></iframe>js代码也得跟着改:function changeMyFrameHeight(){    var ifm= document.getElementById("iframepage");     ifm.height=document.documentElement.clientHeight;}window.onresize=function(){       changeMyFrameHeight();  }


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

所以,建公司网站使用此方法可以完美的、真正的让iframe自适应高度了,试试看吧,并且兼容多种浏览器。

标签: #js设置图片高度适应屏幕 #js设置图片高度适应屏幕怎么设置 #js设置图片高度适应屏幕怎么设置不了 #js设置图片高度适应屏幕怎么设置的 #js设置图片高度适应屏幕怎么设置的呢