想到的一种办法是,在父页面里获取子页面的高度,在父页面onlod里把获取到子页面的高度赋值给父页面iframe标签,不过这种方法感觉不是很好,因为浏览器兼容性不好,获取不到高度

这种方法有两种写法

  1. <script type="text/javascript">
  2. // 计算页面的实际高度,iframe自适应会用到
  3. function calcPageHeight(doc) {
  4. var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)
  5. var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight)
  6. var height = Math.max(cHeight, sHeight)
  7. return height
  8. }
  9. var ifr = document.getElementById('ifr')
  10. ifr.onload = function() {
  11. var iDoc = ifr.contentDocument || ifr.document
  12. var height = calcPageHeight(iDoc)
  13. ifr.style.height = height + 'px'
  14. }
  15. </script>
  1. <script>
  2. // 计算页面的实际高度,iframe自适应会用到
  3. function calcPageHeight(doc) {
  4. var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)
  5. var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight)
  6. var height = Math.max(cHeight, sHeight)
  7. return height
  8. }
  9. window.onload = function() {
  10. var height = calcPageHeight(document)
  11. parent.document.getElementById('ifr').style.height = height + 'px'
  12. }
  13. </script>

还有一种是兼容性比较好的

  1. <iframe src="http://www.fufuok.com/" id="iframepage" name="iframepage" frameBorder=0 scrolling=no width="100%" onLoad="iFrameHeight()" ></iframe>Javascript代码:
  2. <script type="text/javascript" language="javascript">
  3. function iFrameHeight() {
  4. var ifm= document.getElementById("iframepage");
  5. var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument;
  6. if(ifm != null && subWeb != null) {
  7. ifm.height = subWeb.body.scrollHeight;
  8. }
  9. }
  10. </script>

html iframe高度自适应的更多相关文章

  1. iframe高度自适应(同域)

    今天解决了iframe高度自适应的问题,不过这只是同域下的页面嵌入,以下是代码: function SetCwinHeight(){ var iframeid = document.getElemen ...

  2. iframe高度自适应

    前两天在网上看到了一道面试题,问iframe高度自适应的问题.发现自己之前几乎没有关注过iframe的问题,所以在这里记录一下. 原题目是: 页面A的域名是:http://www.taobao.com ...

  3. iframe高度自适应内容

    JS自适应高度,其实就是设置iframe的高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹.对于用户体验和网站美观起着重要作用. 如果内容是固定的,那么我们可以通过CSS来给它直接定义一个高 ...

  4. 完美实现跨域Iframe高度自适应【Iframe跨域高度自适应解决方案】

    Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的“BUG”就是iframe的高度无法自动适应,这一点让很多 ...

  5. IFrame 高度自适应的两种方式 .

    iframe 高度自适应一般是指: iframe 本身的高度 =  内容高度. 这样做可以使最外层不出现滚动条. 如果网页内容使用了Ajax方式填充内容的话. 由于内容是动态的. 以上方式应该变为: ...

  6. 兼容firefox的iframe高度自适应代码

    网上关于iframe高度自适应的代码有很多,但比较杂乱,本文根据实用性整理了以下代码: JavaScript部分: 折叠JavaScript Code复制内容到剪贴板 <script type= ...

  7. 跨域iframe高度自适应(兼容IE/FF/OP/Chrome)

    采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 由于客户端js使用浏览器的同源安全策 ...

  8. 跨域iframe高度自适应(兼容IE/FF/OP/Chrome)

    采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 由于客户端js使用浏览器的同源安全策 ...

  9. 谷歌、火狐浏览器下实现JS跨域iframe高度自适应的完美解决方法,跨域调用JS不再是难题!

    谷歌.火狐浏览器下实现JS跨域iframe高度自适应的解决方法 导读:今天开发的时候遇到个iframe自适应高度的问题,相信大家对这个不陌生,但是一般我们都是在同一个项目使用iframe嵌套页面,这个 ...

  10. CSS完美实现iframe高度自适应(支持跨域)

    Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的"BUG"就是iframe的高度无法自 ...

随机推荐

  1. Java中不定项参数(可变参数)的使用

    Java1.5增加了新特性:可变参数:适用于参数个数不确定,类型确定的情况,java把可变参数当做数组处理. 注意事项:   1)不定项参数必须放在参数列表最后一个.   2)不定项参数只能有一个(多 ...

  2. SSIS - 6.序列容器和优先约束

    一.多样的优先约束(看例子) 1)打开一个空白的SSIS包,拖拽4个脚本任务到设计面板上,重命名后连接起来,如下图所示. 2)执行包,可以看到任务执行成功.之后我们改变C和D之间的优先约束为“失败”. ...

  3. 【安富莱原创开源应用第1期】花式玩转网络摄像头之TCP上位机软件实现,高端大气上档次,速度2MB/S,华丽丽的界面效果

    说明:1.例子是两年前做的,一直没有顾上整理出来,今天特地整理出来,开源出来给大家玩.2.上位机是emWin模拟器开发的,大家估计很难猜到,所以你会emWin话的,就可以轻松制作上位机.做些通信和控制 ...

  4. 浏览器本地数据库 IndexedDB 基础详解

    一.概述 随着浏览器的功能不断增强,越来越多的网站开始考虑,将大量数据储存在客户端,这样可以减少从服务器获取数据,直接从本地获取数据. 现有的浏览器数据储存方案,都不适合储存大量数据:Cookie 的 ...

  5. 这月薪过万的Java高级学习资料,难得一遇的干货,不下载真可惜了!

    大家有没有想我呢 不管你们想不想我 我挺想你们的 通过昨天我不断的 死气白咧各种说好话 最终 要到了Java学科的Java集合学习资料 里面包含视频+资料+源码 堂兄也有一个愿望 希望你们月薪过万后 ...

  6. 3种方法来在Linux电脑上查找文件

    如果你不太了解Linux命令,那么在Linux系统里查找文件是比较困难的.只要使用多种不同的终端命令,可以很快地找到文件.Linux命令比其它操作系统的搜索功能更加强大,掌握这些命令就能你完全控制这些 ...

  7. oauth2.0通过JdbcClientDetailsService从数据库读取相应的配置

    oauth2.0通过JdbcClientDetailsService从数据库读取相应的配置 在上一节我们讲述的配置是把授权码存储在redis中,把相应的请求的路径用使用in-memory存储 ,这个是 ...

  8. IdentityServer4之Implicit(隐式许可)

    IdentityServer4之Implicit(隐式许可) 参考 官方文档:3_interactive_login .7_javascript_client 概念:隐式许可 认证服务端配置 认证服务 ...

  9. C# 8中的范围类型(Range Type)

    C# 8.0中加入了一个新的范围类型(Range Type). 这里我们首先展示一些代码,并一步一步为代码添加一些不同的东西, 为大家展示一下范围类型的功能和用法. 我们最原始的代码如下: stati ...

  10. RabbitMQ学习笔记(一) Hello World

    RabbitMQ是做什么的? RabbitMQ可以类比现实生活中的邮政服务. 现实中邮件服务处理的是邮件,发件人写好信件投入邮箱,邮递员收取信件存入邮局,邮局根据信件地址,分配邮递员投递信件到指定地点 ...