跨域情况下Iframe高度自适应解决方案
跨域情况下Iframe高度自适应解决方案
相信很多人的遇到过跨域情况下Iframe高度自适应的问题，在百度和Google上找了很久，都没有找到合适的一解决方案，一次遇然机会，发现了window.navigator这个对象居然在能够在所有的Iframe中均可以访问的对象。下面是基于该对象的一个iframe跨域解决方案
对window.navigator这个对象进行扩展，可以将该js代码存在一个iframe.js文件，以后在父页面调用这个js即可
//声明一个数组用来保存所有的Iframe
window.navigator.Allframes=null;
window.navigator.Allframes=...{''$Top_Page$'':window};
//根据页面name属性查找到子页面所在Ifame对象
window.navigator.getFrameByName=function(oName)...{
return this.Allframes[oName]
};
//将一个Iframe对象注册到window.navigator.Allframes数组中
window.navigator.registerFrame=function(oName,oElement)...{
this.Allframes[oName]=oElement
};
//提供一个方法将一个子页面封装成一个对象
window.navigator.createFrame=function(childPage)...{
var fun=function()...{
this.objChildPage=childPage;
this.getFrameByName=function(oName)...{
return window.navigator.getFrameByName(oName)
};
this.resizeHeight=function()...{
try...{
var height=this.objChildPage.document.body.scrollHeight;
if(this.objChildPage.name&&height)...{
var curIframe=window.navigator.getFrameByName(this.objChildPage.name);
curIframe.height=height;
return document.body.scrollHeight;
}
}catch(ex)...{
//异常处理
}
}
};
return new fun
};
父页面parent.html,在http://parent.testdomain.com/上
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>父页面</title>
<SCRIPT language="javascript" src="iframe.js" /></script>
<!--通过CSS的方式为所有的Iframe注册，也可以通过javascript方式调用window.navigator.registerFrame注册指定的Iframe-->
<STYLE>iframe{behavior:expression(function(element){window.navigator.registerFrame(element.name, element);}(this))}</STYLE>
</head>
<body>
<iframe id="childPage" name="childPage" src="http://child.testdomain.com/" width="100%" height="50px" ></iframe>
</body>
</html>
子页面(child.html)在http://child.testdomain.html/上
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>子页面</title>
<SCRIPT LANGUAGE="JavaScript">
//在body.onload中调用
function AutoResizeHeight(){
try{
var control = window.navigator.createFrame(this);
control.resizeHeight();
}catch(ex){}
}
</script>
</head>
<body onload="AutoResizeHeight()">
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
</body>
</html>
对window.navigator这个对象进行扩展，可以将该js代码存在一个iframe.js文件，以后在父页面调用这个js即可
//声明一个数组用来保存所有的Iframe
window.navigator.Allframes=null;
window.navigator.Allframes=...{''$Top_Page$'':window};
//根据页面name属性查找到子页面所在Ifame对象
window.navigator.getFrameByName=function(oName)...{
return this.Allframes[oName]
};
//将一个Iframe对象注册到window.navigator.Allframes数组中
window.navigator.registerFrame=function(oName,oElement)...{
this.Allframes[oName]=oElement
};
//提供一个方法将一个子页面封装成一个对象
window.navigator.createFrame=function(childPage)...{
var fun=function()...{
this.objChildPage=childPage;
this.getFrameByName=function(oName)...{
return window.navigator.getFrameByName(oName)
};
this.resizeHeight=function()...{
try...{
var height=this.objChildPage.document.body.scrollHeight;
if(this.objChildPage.name&&height)...{
var curIframe=window.navigator.getFrameByName(this.objChildPage.name);
curIframe.height=height;
return document.body.scrollHeight;
}
}catch(ex)...{
//异常处理
}
}
};
return new fun
};
父页面parent.html,在http://parent.testdomain.com/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>父页面</title>
<SCRIPT language="javascript" src="iframe.js" /></script>
<!--通过CSS的方式为所有的Iframe注册，也可以通过javascript方式调用window.navigator.registerFrame注册指定的Iframe-->
<STYLE>iframe{behavior:expression(function(element){window.navigator.registerFrame(element.name, element);}(this))}</STYLE>
</head>
<body>
<iframe id="childPage" name="childPage" src="http://child.testdomain.com/
</body>
</html>
子页面(child.html)在http://child.testdomain.html/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>子页面</title>
<SCRIPT LANGUAGE="JavaScript">
//在body.onload中调用
function AutoResizeHeight(){
try{
var control = window.navigator.createFrame(this);
control.resizeHeight();
}catch(ex){}
}
</script>
</head>
<body onload="AutoResizeHeight()">
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
</body>
</html>
