Iframe跨域自适应高度(兼容IE/Firefox)终极解决方案

Iframe跨域自适应高度(兼容IE/Firefox)终极解决方案

创新互联是一家专业从事成都网站建设、网站制作的网络公司。作为专业网站设计公司,创新互联依托的技术实力、以及多年的网站运营经验,为您提供专业的成都网站建设、成都营销网站建设及网站设计开发服务!

main.html在A域,被包含的iframe.html、proxy.html以及proxy.js在B域

main.html

<script type="text/javascript" src="http://zhaohe162.blog.163.com/blog/B域/proxy.js"></script>

<script type="text/javascript">

var aai=new AutoAdjustIframe();

aai.autoAdjust('frameName');

</script>

<div style="border:1px solid#ccc;padding:10px;">

<iframe id="frameName" name="frameName" src="http://zhaohe162.blog.163.com/blog/B域/iframe.html?hostname=192.168.1.100:8080" style="width:100%;border:1px solid#f00;" scrolling="no" frameborder="0"></iframe>

</div>

<br/>尾部<br/>

iframe.html

文字<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

文字<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

文字<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

文字<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

文字<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

文字<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

文字<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

文字<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

文字<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<script type="text/javascript" src="http://zhaohe162.blog.163.com/blog/proxy.js"></script>

<script type="text/javascript">

var aai=new AutoAdjustIframe();

aai.setHash();

</script>

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)终极解决方案
网站地址:https://www.cdcxhl.com/article34/eeoope.html

成都网站建设公司_创新互联,为您提供网站策划品牌网站设计标签优化关键词优化自适应网站网站内链

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

营销型网站建设