注意：为使页面有更好的兼容性，在使用以下代码前，请将aspx页中头部的<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">删除,至于居中情况结合<center> …… </center>标签来完成

在实际的项目进行中，很多地方可能由于历史原因不得不去使用iframe，包括目前正火热的应用开发也是如此。

随之而来的就是在实际使用iframe中，会遇到iframe高度的问题，由于被嵌套的页面长度不固定而显示出来的滚动条，不仅影响美观，还会对用户操作带来不便。于是自动调整iframe的高度就成为本文的重点。

采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键，同时由于JavaScript对不同域名下权限的控制，引发出同域、跨域两种情况。

同域时Iframe高度自适应
下面的代码兼容IE/Firefox浏览器，控制id为“iframeid”的iframe的高度，通过JavaScript取得被嵌套页面最终高度，然后在主页面进行设置来实现。

代码如下，可复制。另外，请注意此解决方案仅供同域名下使用。

<script type="text/javascript">

  function SetCwinHeight(){

   var iframeid=document.getElementById("iframeid"); //iframe id

   if (document.getElementById){

    if (iframeid && !window.opera){

     if (iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight){

      iframeid.height = iframeid.contentDocument.body.offsetHeight;

     }else if(iframeid.Document && iframeid.Document.body.scrollHeight){

      iframeid.height = iframeid.Document.body.scrollHeight;

     }

    }

   }

  }

 </script>

 <iframe width="100%" id="iframeid" onload="Javascript:SetCwinHeight()" height="" frameborder="" src="kimi.php"></iframe>

代码来自http://www.ccvita.com/376.html

方法2

在网页<body>标签之前插入以下代码：

<script language="javascript">
function turnHeight(iframe)  
{  
    var frm = document.getElementById(iframe);  
    var subWeb = document.frames ? document.frames[iframe].document : frm.contentDocument;  
    if(frm != null && subWeb != null)   
    { frm.height = subWeb.body.scrollHeight + 20;}  
}
</script>

调用代码如下：

<IFRAME id=iframe1 src="/main/sf.php" frameBorder=0 width="986" scrolling=no onload="turnHeight('iframe1');" height="100%"></IFRAME>

这样就能解决火狐iframe自适应高度的问题，而且兼容IE。

注意，iframe页面中的元素，不能使用float属性和display属性，否则在火狐中获取到的iframe高度将为0，导致自适应高度失败。

JS 中根据iframe子页面自动iframe高度的更多相关文章

  1. JS中iframe子页面与父页面之间通信

    iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同. 一.同域下父子页面的通信 父页面parent.html <html> <head& ...

  2. js 在iframe子页面获取父页面元素,或在父页面 获取iframe子页面的元素的几种方式

    用JS或jquery访问页面内的iframe,兼容IE/FF 注意:框架内的页面是不能跨域的! 假设有两个页面,在相同域下. index.html 文件内含有一个iframe: XML/HTML代码 ...

  3. iframe子页面与父页面元素的访问以及js变量的访问

    1.子页面访问父页面元素  parent.document.getElementById('id')和document相关的方法都可以这样用 2.父页面访问子页面元素  document.getEle ...

  4. Js获取iframe子页面全局变量

    项目中通过iframe内嵌了一个子页面,子页面定义了一些全局变量,父页面需要获取子页面的全局变量,做了一些测试(我的环境IE10和Firefox32.0.3),得出如下结论: IE下: window. ...

  5. js之iframe子页面与父页面通信

    iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同. 一.同域下父子页面的通信 父页面parent.html <html> <head& ...

  6. Js动态获取iframe子页面的高度////////////////////////zzzz

    Js动态获取iframe子页面的高度   Js动态获取iframe子页面的高度总结 问题的缘由 产品有个评论列表引用的是个iframe,高度不固定于是引发这个总结. 方法1:父级页面获取子级页面的高度 ...

  7. 父子页面之间元素相互操作(iframe子页面)

    js/jquery获取iframe子页面中元素的方法: 一.使用window.frames["iframe的ID"]获取元素 window.onload = function() ...

  8. CRM 2016 IFrame 子页面执行 父页面函数

    CRM 中定义以下函数: windows.parent.functionname(){ //do somethion } IFrame 子页面调用 JS: windows.parent.functio ...

  9. iframe子页面position的fixed

    前言: 首先说一说我昨天天的苦逼经历.中午吃饭时一同事跟我说,他做的项目嵌套iframe后,子页面的position设置fixed失效了. 经过反复询问,得知他用了两层iframe,再加上最外的父页面 ...

随机推荐

  1. [Domino]从嵌入另一个数据库嵌入的Embedded View无法正常显示，提示unable to lauch

    发现问题 1. 项目中需要在一个数据库中插入另一个数据库的Embedded View,使用起来十分费劲,在选择数据库的下拉菜单中经常会找不到目标数据库: 2. 在做日文版的时候,从workbench导 ...

  2. PhoneGap在Mac环境下使用问题小结

    PhoneGap在Mac环境下使用问题小结1,问题一:在执行命令phonegap run ios出现“Cordova needs ios-sim version 1.7 or greater, you ...

  3. C#中资源文件的使用

    在程序中会用到图片,有两种方法,一种是将图片放在运行文件夹中,直接调用,另一种是将图片放入资源文件中. 方法一,一般在.exe文件同级创建文件夹,如“ico”,然后把图标放进去.在程序中代码采用相对路 ...

  4. Markdown安装与简单使用

    早就听过Markdown的大名了,说是最适合程序员的编辑器,一点也不为过.平时写文章,写博客.除了内容以外,还要被一堆繁琐的样式困扰,毕竟样式太难看,既是自己的文章,也会懒得看的.今天正好看到博客上面 ...

  5. windows系统的对象管理

    windows中的对象和高级编程语言中所说的对象还欧区别,准确来讲,windows中的对象其实指的是一种数据结构并且是一种带着“对象头(object head)” 的数据结构!  所以windows中 ...

  6. 类方法classmethod 绑定方法

    绑定方法 1.凡是类中的方法和函数,都是绑定给对象使用的: 2.绑定方法都有自动传值的功能.传递进去的值,就是对象本身. 3.如果类想调用绑定方法,就必须遵循函数的参数规则,有几个参数,就必须传递几个 ...

  7. git学习------>如何汉化GitLab？

    在上一篇博客中,已经正常安装好了GitLab,然而全部界面都是纯英文的,为了照顾整个团队的英文水平,因此这篇博客的目的是将纯英文的GitLab进行汉化. 纯英文界面 第一步: 确认GitLab版本号 ...

  8. my first ai application

    正式下手之前,先跑个demo体验以下. 1.my first ai application https://sonnguyen.ws/first-ai-application/ https://git ...

  9. 转 Merkle Tree（默克尔树）算法解析

    Merkle Tree概念  Merkle Tree,通常也被称作Hash Tree,顾名思义,就是存储hash值的一棵树.Merkle树的叶子是数据块(例如,文件或者文件的集合)的hash值.非叶节 ...

  10. 避免SSH连接因超时闲置断开

    用SSH过程连接电脑时,经常遇到长时间不操作而被服务器踢出的情况,常见的提示如: Write failed: Broken pipe 这是因为如果有一段时间在SSH连接上无数据传输,连接就会断开.解决 ...