Iframe跨域自适应高度(兼容IE/Firefox)终极解决方案
Iframe跨域自适应高度(兼容IE/Firefox)终极解决方案
创新互联是一家专业从事成都网站建设、网站制作的网络公司。作为专业网站设计公司,创新互联依托的技术实力、以及多年的网站运营经验,为您提供专业的成都网站建设、成都营销网站建设及网站设计开发服务!
main.html在A域,被包含的iframe.html、proxy.html以及proxy.js在B域
main.html
尾部
iframe.html
文字
文字
文字
文字
文字
文字
文字
文字
文字
proxy.html
B域一个空白页面,防止404
proxy.js
var AutoAdjustIframe=function(){
var autoSecond=1;
this.autoAdjust=function(iframeId){
setInterval(function(){
try{
var height=parseFloat(window.frames[iframeId].frames[iframeId+'-proxyiframe'].location.hash.replace(/^#/,''))||100;
document.getElementById(iframeId).style.height=height+'px';
}catch(e){};
},autoSecond);
};
var getHeight=function(){
return Math.max(document.documentElement.scrollHeight,document.body.scrollHeight,
document.documentElement.clientHeight,document.body.clientHeight);
};
/*
*设置代理页的hash值,需要A域传给B域hostname
*/
this.setHash=function(){
var aSearch=document.location.search.match(/hostname=([^&]+)/);
if(!!aSearch){
//设定代理页面url
var proxyUrl='http://'+aSearch[1]+'/proxy.html';
var height=getHeight();
try{
console.log('proxyUrl:'+proxyUrl+'\nThe Iframe\'s height:'+height);
}catch(e){};
//生成代理iframe
var iframe=document.createElement('iframe');
iframe.src=proxyUrl+'#'+height;
iframe.id=window.name+'-proxyiframe';
iframe.name=window.name+'-proxyiframe';
iframe.style.display='none';
document.body.appendChild(iframe);
//动态设置代理iframe的hash,以便重新获取新的高度
var interval=setInterval(function(){
if(getHeight()!=height){
height=getHeight();
iframe.src=proxyUrl+'#'+height;
try{
console.log('Reloading,The Iframe\'s height:'+height);
}catch(e){};
}
},autoSecond);
}
};
};
本文题目:Iframe跨域自适应高度(兼容IE/Firefox)终极解决方案
转载来于:http://pwwzsj.com/article/eeoope.html