支持跨域iframe高度随内容动态缩放自适应
来源：自学PHP网
时间：2014-09-19 14:48 作者：
阅读:次
[导读] iframe的高度自适应是一个老生常谈的问题了，今天再找到几个关于iframe高度自适应实现，我稍加整理了一下与各位朋友分享，代码简洁兼容性也不错。...
|
iframe高度随页面内容自适应高度，当页面高度变动时iframe高度也自动变化
浏览器兼容：IE6++、Firefox全系列、Chrome全系列、(其他版本浏览器未做测试，期待你测试评论反馈以完善本文，谢谢)
同域环境下实现方法：
方法一：仅修改iframe父页面(iframeA.php)，iframe子页面内容(iframeB.php)不用添加其他js或额外代码
iframe父页面(iframeA.php)添加代码如下：
| 代码如下 |
复制代码 |
|
<iframe width="100%" height="0" id="frame_content" src="/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="/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/>
</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 位于域上
iframeB.php 位于域上
iframeC.php 位于域上
实现方式：
iframeA.php代码：
| 代码如下 |
复制代码 |
|
<iframe id="ifr" src="/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="/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提交跳转处理
<form name="myform" id="myform" method="post" action=http://www.111cn.net target="_self" ></form>
注意：target=“_self” |
