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

2016-02-19 10:08 9 1 收藏

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

【 tulaoshi.com - Web开发 】

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

来源:https://www.tulaoshi.com/n/20160219/1593532.html

延伸阅读
标签: Web开发
有时候,我们可能需要象新版的Yahoo邮箱一样,让一些数据显示块可以根据页面大小进行自适应。事实并不难,但是如果单纯用CSS控制的话,往往不能完全实现我们要的效果,这时候需要借助javascript,Javascript可以让我我们实现司空见怪的自适应页面,在iSunXoft的HR开源项目就应用到.     实现原理:     获取IE显...
标签: Web开发
自适应高度的问题,采用 Div + CSS 进行三列或二列布局时,事先不知道具体高度,只能根据内容的增减自适应高度,要使两列(或三列)的高度相同,用 Table 很容易实现,但采用 Div + CSS 就显得比较麻烦了。按照一般的做法,大都采用背景图填充或 JS 脚本的方法使高度相同,但这些都不是最好的办法,我认为… 下面介绍采用“隐藏容器溢...
自适应高度的问题,采用 Div + CSS 进行三列或二列布局时,事先不知道具体高度,只能根据内容的增减自适应高度,要使两列(或三列)的高度相同,用 Table 很容易实现,但采用 Div + CSS 就显得比较麻烦了。按照一般的做法,大都采用背景图填充或 JS 脚本的方法使高度相同,但这些都不是最好的办法,我认为… 下面介绍采用“隐藏容器溢出”和“...
标签: Web开发
当你在页面上使用了iframe之后,一般来说会不希望iframe显示难看的滚动条,以使iframe里面的内容和主页面的内容浑然一体。这时候你会设置 scrolling="no" 属性。但是这样一来如果iframe里面的内容是变化的,高度会随之内容的变化而变化的时候,你的iframe就会显得太长导致底下一大片空白,或者正好相反,由于iframe的高度太小导致一部...
标签: Web开发
当你在页面上使用了iframe之后,一般来说会不希望iframe显示难看的滚动条,以使iframe里面的内容和主页面的内容浑然一体。这时候你会设置 scrolling="no" 属性。但是这样一来如果iframe里面的内容是变化的,高度会随之内容的变化而变化的时候,你的iframe就会显得太长导致底下一大片空白,或者正好相反,由于iframe的高度太小导致一部...

经验教程

430

收藏

98
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部