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

javascript|加载|自适应

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'> 
       <title>iframe自适应加载的页面高度</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'> 
   <title>iframe  自适应其加载的网页(多浏览器兼容)</title> 
   <script  language=javascript>
   function iframeAutoFit()
   {
      try
      {
         if(window!=parent)
         {
          var a = parent.document.getElementsByTagName("IFRAME");
            for(var i=0; i<a.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>

 

时间: 2024-09-27 17:13:40

JavaScript应用:Iframe自适应其加载的内容高度的相关文章

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

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'>           <title>ifram

Iframe自适应其加载的内容高度_经验交流

<html>       <head>          <meta  http-equiv='Content-Type'  content='text/html;  charset=gb2312'>          <meta  name='author'  content='站长中国 http://www.zzcn.net/'>          <title>iframe自适应加载的页面高度</title>       <

jQuery+PHP+ajax实现微博加载更多内容列表功能_php技巧

在一些微博网站上我们经常可以看到这样的应用,微博内容列表上并没有使用分页条,而是一次加载一定数量的记录显示在列表页,当用户浏览到列表页底部时,可以通过单击"查看更多"来加载更多记录.本文将结合jQuery和PHP给大家讲述如何实现这种功能. Ajax加载的基本原理:当页面载入时,jQuery向后台请求数据,PHP通过查询数据库将最新的几条记录显示在列表页,在列表页的底部有个"查看更多"的链接,通过触发该链接,向服务端发送Ajax请求,后台PHP程序得到请求参数,并作

php+ajax+jquery实现点击加载更多内容_jquery

我们在一些微博网站上可以碰到这样的应用,微博内容列表没有使用分页条,而是一次加载一定数量的记录显示在列表页,当用户浏览到列表页底部时,可以通过单击"查看更多"来加载更多记录.本文我将结合jQuery和PHP给大家讲述如何实现这种应用. 基本原理:页面载入时,jQuery向后台请求数据,PHP通过查询数据库将最新的几条记录显示在列表页,在列表页的底部有个"更多"链接,通过触发该链接,向服务端发送Ajax请求,后台PHP程序得到请求参数,并作出相应,获取数据库相应的记录

javascript控制iframe自适应高度例子

iframe有一个烦人的问题,就是在没有设置高度的情况下,被嵌套区会显示一大片空白,有时候设置了高度也不行,后来用JavaScript轻松解决了iframe自适应高度的问题,下面把经验和具体方法分享出来. 为了演示方便,这里需要2个页面,一个是被iframe的页,一个是母页面,先来看母页面,也就是有iframe代码的页面:  代码如下 复制代码 <html> <head> <title>iframe自适应加载的网页高度</title> </head&g

JavaScript实现判断图片是否加载完成的3种方法整理

 这篇文章主要介绍了JavaScript实现判断图片是否加载完成的3种方法整理,本文讲解了onload方法.javascipt原生方法.jquery方法三种方法,需要的朋友可以参考下     有时候我们在前端开发工作中为了获取图片的信息,需要在图片加载完成后才可以正确的获取到图片的大小尺寸,并且执行相应的回调函数使图片产生某种显示效果.本文主要整理了几种常见的javascipt判断图片加载完成时的方法,并通过代码与实际应用相结合进行解释与说明. onload方法 通过向img标签添加onload

【ArcGis for javascript从零开始】之一 ArcGis加载天地图

原文:[ArcGis for javascript从零开始]之一 ArcGis加载天地图 最近做项目需要用到ArcGis来进行数据展示和数据分析.以前从来没有接触过与Gis有关的东西,一切需要从头开始学.没有时间从头系统地学习了,只能用到哪个学习哪里了,本系列只是对学习的路径进行记录.ArcGis在网上没有找到中文的API,只有官网的英文API和Demo,而且用到了大量dojo的API,dojo也没有接触过,这方面也是需要学习的--   一.ArcGis加载 引入css 和js   [html]

在首页中iframe引入一个加载中的页面,在ie浏览器中该部分出现几秒钟白屏,怎么解决???

问题描述 在首页中iframe引入一个加载中的页面,在ie浏览器中该部分出现几秒钟白屏,怎么解决??? 在首页中iframe引入一个加载中的页面,在ie浏览器中该部分出现几秒钟白屏,怎么解决??? 解决方案 加载的那个页面初始化数据也是需要时间的,你可以在加载的时候有一个对应的提示[正在加载]或者加一个等待的gif图片.

JavaScript判断图片是否已经加载完毕的方法汇总_javascript技巧

在网上有很多关于判断图片是否已经加载完毕的文章,但是有的浏览器并不适合,下面小编给大家分享一些有关JavaScript判断图片是否已经加载完毕方法汇总,具体内容如下所示: 一.onload事件 通过监听图片的onload事件,可以判断图片是否已经加载完成,兼容所有的浏览器(w3c推荐方法),代码示例如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"