未来往事
iframe高度随页面内容自适应高度,当页面高度变动时iframe高度也自动变化
浏览器兼容:IE6++、Firefox全系列、Chrome全系列、(其他版本浏览器未做测试,期待你测试评论反馈以完善本文,谢谢)

同域环境下实现方法:
方法一:仅修改iframe父页面(iframeA.php),iframe子页面内容(iframeB.php)不用添加其他js或额外代码
iframe父页面(iframeA.php)添加代码如下:
<iframe width="100%" height="0" id="frame_content" src="http://fity.cn/iframeB.php" scrolling="no" frameborder="0" onload="this.height=this.contentWindow.document.documentElement.scrollHeight"></iframe>

<script type="text/javascript">
function reinitIframe(){
var iframe = document.getElementById("frame_content");
try{
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);
iframe.height =  height;
}catch (ex){}
}
window.setInterval("reinitIframe()", 200);
</script>

方法二:修改iframe子页面内容(iframeB.php),iframe父页面(iframeA.php)不需要加入js代码
iframe父页面(iframeA.php)添加代码如下:
<IFRAME border=0 marginWidth=0 frameSpacing=0 marginHeight=0 src="http://fity.cn/iframeB.php" frameBorder=0 noResize scrolling="no" width=100% height=100% vspale="0" id="childFrame" ></IFRAME>
iframe子页面(iframeB.php)代码范例如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
<script language="javascript" type="text/javascript">
function IFrameResize(){
//alert(this.document.body.scrollHeight); //弹出当前页面的高度
var obj = parent.document.getElementById("childFrame"); //取得父页面IFrame对象
//alert(obj.height); //弹出父页面中IFrame中设置的高度
obj.height = this.document.body.scrollHeight; //调整父页面中IFrame的高度为此页面的高度
}
window.setInterval("IFrameResize()", 200);//这里的时间可以设置短一些,时间越短高度变动时抖动越不明显
</script>
</head>
<body onload="IFrameResize()">
<div id='main' style='background:#FFF;width:100%;'>
测试数据
<br/>
测试数据
<br/>
测试数据
<br/>
http://fity.cn
</div>
</div>
</body>
</html>
注意:这里需要定义body onload属性


跨域环境下实现方法:
iframe若是跨域,不能直接用JS来控制,只能通过一个中间代理,我们这里选择在iframe的子页面(iframeB.php)中加一个与iframe父页面(iframeA.php)同域的页面(iframeC.php);这样页面iframeC.php就能和父页面iframeA.php进行无障碍的通讯了;因为子页面iframeB.php页面嵌入iframeC.php,所以页面iframeB.php可以改写页面iframeC.php的href值,这里给出一个例子,假设域名对应文件如下:
引用
iframeA.php  位于http://fity.cn域上
iframeB.php   位于http://www.household114.com域上
iframeC.php  位于http://fity.cn域上

实现方式:
iframeA.php代码:
<iframe id="ifr" src="http://www.household114.com/iframeB.php" height="200" width="400" scrolling="no" frameborder="0" ></iframe>
<script type="text/javascript">
var ifr_el = document.getElementById("ifr");
function getIfrData(data){
    ifr_el.style.height = data+"px";
}
</script>

iframeB.php代码:
<style type="text/css">
body {
  background: #eee;
}
h1 {
  padding: 0;
  margin: 0;
  font-size: 16px;
}
h2 {
  padding: 0;
  font-size: 13px;
  font-weight: normal;
}
iframe {
  visibility: hidden;
}
#box {
  height: 220px;
}
</style>
<div id="box">
  <button id="btn_auto" type="button">Height Auto: off</button>
  <button id="btn_plus10" type="button">Height +10px</button>
  <button id="btn_minus10" type="button">Height -10px</button>
</div>
<iframe id="ifr" src="http://fity.cn/iframeC.php" width="0" height="0"></iframe>
<script type="text/javascript">
var box_el = document.getElementById("box"),
    btn_auto_el = document.getElementById("btn_auto"),
    btn_plus10_el = document.getElementById("btn_plus10"),
    btn_minus10_el = document.getElementById("btn_minus10"),
    ifr_el = document.getElementById("ifr");

var isAuto = false,
    oldHeight = 0,
    ifrSrc = ifr_el.src.split("#")[0];

btn_auto_el.onclick = function(){
  if(!isAuto){
    isAuto = true;
    btn_auto_el.innerHTML = "Height Auto: on";
  }else{
    isAuto = false;
    btn_auto_el.innerHTML = "Height Auto: off";
  }
}
btn_plus10_el.onclick = function(){
  var height = box_el.offsetHeight;
  box_el.style.height = (10+height)+"px";
}
btn_minus10_el.onclick = function(){
  var height = box_el.offsetHeight;
  box_el.style.height = (height-10)+"px";
}
setInterval(function(){
  if(isAuto){
    var height = document.body.scrollHeight;
    height += 20;
    if(oldHeight != height){
      oldHeight = height;
      ifr_el.src = ifrSrc+"#"+oldHeight;
    }
  }
}, 200);
</script>

iframeC.php代码:
<script type="text/javascript">
var oldHeight = 0;

setInterval(function(){
  var height = location.href.split("#")[1];
  if(height && oldHeight != height){
    oldHeight = height;
    if(window.parent.parent.getIfrData){
      window.parent.parent.getIfrData(oldHeight);
    }
  }
}, 200);
</script>

最后值得注意的一点:包含该iframe的div高度值不要设置,iframe的高度值最好也不要设置。

补充一点:iframe子页面submit提交跳转处理


关于跨域你也可以参考以下其他网络文章:
http://www.ccvita.com/376.html
http://zjuhpp.com/iframe-highly-adaptive.html
作者:Rinald @『未来往事 | 记录生活,存储回忆!
原文地址:http://fity.cn/post/423/
本站采用「署名 4.0 国际(CC BY 4.0)」创作共享协议。通俗地讲,只要在使用时署名,那么使用者可以对本站所有原创内容进行转载、节选、混编、二次创作,允许商业性使用。除非在文章正文内单独说明,本站欢迎各种形式的转载。互联网技术更新很快,本站很多文章都具有实效性,我会及时更新原文,但转载的文章无法通知更新。为了不给读者造成困惑或误导,请大家在转载时保留此出处信息。
小清新 Homepage
2014/01/30 19:28
新年快乐!!
Rinald 回复于 2014/02/05 18:03
谢谢,同乐!
第1页 / 共1页 第一页 1 最后页
发表评论
  昵称 [注册]
  密码 (游客无需密码)
  网址
  电邮(电子邮件地址不会被公开, 仅用于接收评论回复提醒使用)
OpenID登入 权限选项 表情