A-A+
iframe 自适应高度
今天在帮一个小伙伴做一个 iframe 自适应的效果,要在产品页面进行无刷新的显示内容,也就是当点击左侧产品导航时,右侧会直接显示出来,而不用再次刷新整个页面,所以需要将右侧做成 iframe 包含进来,这样在点击产品导航时就会只显示右侧相应的内容了,这样给人的体验非常好,而右侧显示的产品内容有多有少,这就导致一个长度不一致的问题,所以就只能使用 iframe 自适应效果了,让其右侧产品随着内容的多少而变化 iframe。
小虎博客使用了很简单的一种方法,但可能并不兼容所有的浏览器,不过已经足够使用了,先来看一下如下的代码:
- function SetWinHeight(obj)
- {
- var win=obj;
- if (document.getElementById)
- {
- if (win && !window.opera)
- {
- if (win.contentDocument && win.contentDocument.body.offsetHeight)
- win.height = win.contentDocument.body.offsetHeight;
- else if(win.Document && win.Document.body.scrollHeight)
- win.height = win.Document.body.scrollHeight;
- }
- }
- }
下面是 iframe 代码,如下:
- <iframe width="778" align="center" id="win" name="win" onload="Javascript:SetWinHeight(this)" frameborder="0" scrolling="no" src="1.htm"></iframe>
这段代码 win 就是框架的名称了,在右侧链接的时候进行选择就可以了,除了这个方法之外,小虎博客还搜集了一些其它的方法,下面一并进行分享一下。
第二种经典的 iframe 自适应高度代码,在多数的浏览器测试下通过,如下:
- <iframe src="https://www.xiaohuboke.com/" id="iframepage" name="iframepage" frameBorder=0 scrolling=no width="100%" onLoad="iFrameHeight()" ></iframe>Javascript代码:
- <script type="text/javascript" language="javascript">
- function iFrameHeight() {
- var ifm= document.getElementById("iframepage");
- var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument;
- if(ifm != null && subWeb != null) {
- ifm.height = subWeb.body.scrollHeight;
- }
- }
- </script>
第三种,同上面一样,据说兼容性都很好,这一款没有进行测试,如下代码:
- <script language="javascript" type="text/javascript">
- function dyniframesize(down) {
- var pTar = null;
- if (document.getElementById){
- pTar = document.getElementById(down);
- }
- else{
- eval('pTar = ' + down + ';');
- }
- if (pTar && !window.opera){
- //begin resizing iframe
- pTar.style.display="block"
- if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight){
- //ns6 syntax
- pTar.height = pTar.contentDocument.body.offsetHeight +20;
- pTar.width = pTar.contentDocument.body.scrollWidth+20;
- }
- else if (pTar.Document && pTar.Document.body.scrollHeight){
- //ie5+ syntax
- pTar.height = pTar.Document.body.scrollHeight;
- pTar.width = pTar.Document.body.scrollWidth;
- }
- }
- }
- </script>
- <iframe src ="/default2.aspx" frameborder="0" marginheight="0" marginwidth="0" frameborder="0" scrolling="auto" id="ifm" name="ifm" onload="javascript:dyniframesize('ifm');" width="100%">
- </iframe>
好了,就分享这几种 iframe 自适应高度的代码吧,其实这几款代码都比较老了,但是都比较经典,对于兼容性上感觉还可以,当然,现在网上还有一些更新的 iframe 自适应代码,大家可以谷歌一下,这里就权当做个笔记吧,在使用的时候可以好进行摘取。