javascript应用:Iframe自适应其加载的内容高度

hxjsj1234

hxjsj1234

2016-02-19 10:08

get新技能是需要付出行动的,即使看得再多也还是要动手试一试。今天图老师小编跟大家分享的是javascript应用:Iframe自适应其加载的内容高度,一起来学习了解下吧!
main.htm: 
代码如下:

html   
    head   
       meta  http-equiv='Content-Type'  content='text/html;  charset=gb2312'   
       meta  name='author'  content='F.R.Huang(meizz梅花雪)//www.meizz.com'   
       titleiframe自适应加载的页面高度/title   
    /head   

    body 
        iframe src="child.htm"/iframe 
    /body 
/html


child.htm:
html  
head  
   meta  http-equiv='Content-Type'  content='text/html;  charset=gb2312'  
   meta  name='author'  content='F.R.Huang(meizz梅花雪)//www.meizz.com'  
   titleiframe  自适应其加载的网页(多浏览器兼容)/title  
   script  language=javascript
   function iframeAutoFit()
   {
      try
      {
         if(window!=parent)
         {
          var a = parent.document.getElementsByTagName("IFRAME");
            for(var i=0; ia.length; i++) //author:meizz
            {
               if(a[i].contentWindow==window)
               {
                   var h = document.body.scrollHeight;
                   if(document.all) {h += 4;}
                   if(window.opera) {h += 1;}
                   a[i].style.height = h;
               }
            }
         }
      }
      catch (ex)
      {
         alert("脚本无法跨域操作!");
      }
   }
   if(document.attachEvent)  window.attachEvent("onload",  iframeAutoFit);  
   else  window.addEventListener('load',  iframeAutoFit,  false);  
   /script  
/head  
body  
   div  style="width:  200;  height:  400;  background-color:  yellow"  
       iframe  自适应其加载的网页(多浏览器兼容)  
   /div  
/body  
/html
展开更多 50%)
分享

猜你喜欢

javascript应用:Iframe自适应其加载的内容高度

Web开发
javascript应用:Iframe自适应其加载的内容高度

利用JAVASCRIPT让IFRAME框架的高度自适应

Web开发
利用JAVASCRIPT让IFRAME框架的高度自适应

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

关于IFRAME 自适应高度的研究

Web开发
关于IFRAME 自适应高度的研究

jQuery解决iframe高度自适应代码

Web开发
jQuery解决iframe高度自适应代码

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

使两个iframe的高度与内容自适应,且相等

Web开发
使两个iframe的高度与内容自适应,且相等

让iframe自适应高度(支持XHTML支持FF)

Web开发
让iframe自适应高度(支持XHTML支持FF)

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

JavaScript进阶教程(

JavaScript进阶教程(

Win8.1 如何调试屏幕分辨率

Win8.1 如何调试屏幕分辨率
下拉加载更多内容 ↓