我是靠谱客的博主 淡然御姐,最近开发中收集的这篇文章主要介绍Iframe自适应其加载的内容高度,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

最简单的一种方法

none.gif 重要提示:src=中你必须填写的网页地址,一定要和本页面在同一个站点上,否则,会抱错,说“拒绝访问!” 
none.gif
none.gif之前自己也碰到过这个问题,为了得到答案去网上搜索,发现有不少人也遇到了这样的问题,现在就把解决方法共享一下 
none.gif
none.gif超简单哦 
none.gif
none.gif1、建立一个bottom.js的文件,然后输入下面的代码(只有两行哦) 
none.gif
none.gifparent.document.all("框架ID名").style.height=document.body.scrollHeight; 
none.gif
none.gifparent.document.all("框架ID名").style.width=document.body.scrollWidth; 
none.gif
none.gif这里的 框架ID名 就是Iframe的ID,比如: 
none.gif
none.gif<IFRAME id="框架ID名" name="left" frameBorder=0 scrolling=no src="XXX.asp" width="100%"></IFRAME> 
none.gif
none.gif2、给你网站里所有的被包含文件里面每个都加入 
none.gif
none.gif<script language = "JavaScript" src = "bottom.js"/></script> 
none.gif
none.gif3、OK,收工! 
none.gif
none.gif我在WINXP、IE6下面测试通过。很简单吧! 
none.gif
none.gif


复杂的方法

main.htm

none.gif < html >   
none.gif    
< head >   
none.gif       
< meta   http-equiv ='Content-Type'   content ='text/html;   charset =gb2312'  />   
none.gif       
< meta   name ='author'   content ='F.R.Huang(meizz梅花雪)//www.meizz.com'  />   
none.gif       
< title > iframe自适应加载的页面高度 </ title >   
none.gif    
</ head >   
none.gif     
none.gif    
< body >
none.gif        
< iframe  src ="child.htm" ></ iframe >
none.gif    
</ body >
none.gif
</ html >

child.htm
none.gif < html >   
none.gif
< head >   
none.gif    
< meta   http-equiv ='Content-Type'   content ='text/html;   charset =gb2312'  />   
none.gif    
< meta   name ='author'   content ='F.R.Huang(meizz梅花雪)//www.meizz.com'  />   
none.gif    
< title > iframe  自适应其加载的网页(多浏览器兼容) </ title >   
expandedblockstart.gifcontractedblock.gif    
< script  type ="text/javascript" > dot.gif
inblock.gif    
<!--
inblock.gif    
function iframeAutoFit()
expandedsubblockstart.gifcontractedsubblock.gif    
dot.gif{
inblock.gif        
var ex;
inblock.gif        
try
expandedsubblockstart.gifcontractedsubblock.gif        
dot.gif{
inblock.gif            
if(window!=parent)
expandedsubblockstart.gifcontractedsubblock.gif            
dot.gif{
inblock.gif                
var a = parent.document.getElementsByTagName("IFRAME");
inblock.gif                
for(var i=0; i<a.length; i++//author:meizz
expandedsubblockstart.gifcontractedsubblock.gif
                dot.gif{
inblock.gif                    
if(a[i].contentWindow==window)
expandedsubblockstart.gifcontractedsubblock.gif                    
dot.gif{
inblock.gif                        
var h1=0, h2=0;
inblock.gif                        
if(document.documentElement&&document.documentElement.scrollHeight)
expandedsubblockstart.gifcontractedsubblock.gif                        
dot.gif{
inblock.gif                            h1
=document.documentElement.scrollHeight;
expandedsubblockend.gif                        }

inblock.gif                        
if(document.body) h2=document.body.scrollHeight;
inblock.gif
inblock.gif                        
var h=Math.max(h1, h2);
expandedsubblockstart.gifcontractedsubblock.gif                        
if(document.all) dot.gif{h += 4;}
expandedsubblockstart.gifcontractedsubblock.gif                        
if(window.opera) dot.gif{h += 1;}
inblock.gif                        a[i].style.height 
= h +"px";
expandedsubblockend.gif                    }

expandedsubblockend.gif                }

expandedsubblockend.gif            }

expandedsubblockend.gif        }

expandedsubblockstart.gifcontractedsubblock.gif        
catch (ex)dot.gif{}
expandedsubblockend.gif    }

inblock.gif    
if(document.attachEvent)
expandedsubblockstart.gifcontractedsubblock.gif    
dot.gif{
inblock.gif        window.attachEvent(
"onload",  iframeAutoFit);
inblock.gif        window.attachEvent(
"onresize",  iframeAutoFit);
expandedsubblockend.gif    }

inblock.gif    
else
expandedsubblockstart.gifcontractedsubblock.gif    
dot.gif{
inblock.gif        window.addEventListener('load',  iframeAutoFit,  
false);
inblock.gif        window.addEventListener('resize',  iframeAutoFit,  
false);
expandedsubblockend.gif    }

inblock.gif    
//-->
expandedblockend.gif
    
</ script >   
none.gif
</ head >   
none.gif
< body >
none.gif    
< table  border ="1"  width ="200"  style ="height: 400px; background-color: yellow" >
none.gif        
< tr >
none.gif            
< td > iframe  自适应其加载的网页(多浏览器兼容,支持XHTML) </ td >
none.gif        
</ tr >
none.gif    
</ table >
none.gif
</ body >   
none.gif
</ html >

最后

以上就是淡然御姐为你收集整理的Iframe自适应其加载的内容高度的全部内容,希望文章能够帮你解决Iframe自适应其加载的内容高度所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(45)

评论列表共有 0 条评论

立即
投稿
返回
顶部