iframe高度自适应高度随内容动态缩放

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

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

方法二：修改iframe子页面内容(iframeB.php)，iframe父页面(iframeA.php)不需要加入js代码
iframe父页面(iframeA.php)添加代码如下：
```html
<IFRAME border=0 marginWidth=0 frameSpacing=0 marginHeight=0 src="https://www.fity.cn/iframeB.php" frameBorder=0 noResize scrolling="no" width=100% height=100% vspale="0" id="childFrame" ></IFRAME> 
```
iframe子页面(iframeB.php)代码范例如下：
```html
<!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/>
https://www.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  位于https://www.fity.cn域上
iframeB.php   位于http://www.household114.com域上
iframeC.php  位于https://www.fity.cn域上

**实现方式：**
**iframeA.php代码：**
```html
<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代码：**
```html
<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="https://www.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代码：**
```html
<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提交跳转处理
```html
<form name="myform" id="myform" method="post" action="action.php" target="_self" ></form>
注意：target=“_self”
```
**关于跨域你也可以参考以下其他网络文章：**
http://www.ccvita.com/376.html
http://zjuhpp.com/iframe-highly-adaptive.html

本文最后更新于 2019-06-27 14:10:37 并被添加「js iframe高度自适应」标签，已有 40687 位童鞋阅读过。

本文作者：未来往事

本文链接：https://felixway.cn/post/423.html

本站使用「署名 4.0 国际」创作共享协议，可自由转载、引用，但需署名作者且注明文章出处

未来往事

iframe高度自适应高度随内容动态缩放

相关文章

此处评论已关闭

iframe高度自适应 高度随内容动态缩放

相关文章

此处评论已关闭

iframe高度自适应高度随内容动态缩放