Iframe跨域自適應高度(兼容IE/Firefox)終極解決方案發布者:本站 時間:2020-05-16 08:05:48
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);
}
};
};
選擇我們,優質服務,不容錯過
1. 優秀的網絡資源,強大的網站優化技術,穩定的網站和速度保證
2. 15年上海網站建設經驗,優秀的技術和設計水平,更放心
3. 全程省心服務,不必擔心自己不懂網絡,更省心。
------------------------------------------------------------
24小時聯系電話:021-58370032