Iframe跨域自適應(yīng)高度(兼容IE/Firefox)終極解決方案
創(chuàng)新互聯(lián)是一家專業(yè)從事成都網(wǎng)站建設(shè)、網(wǎng)站制作的網(wǎng)絡(luò)公司。作為專業(yè)網(wǎng)站設(shè)計(jì)公司,創(chuàng)新互聯(lián)依托的技術(shù)實(shí)力、以及多年的網(wǎng)站運(yùn)營(yíng)經(jīng)驗(yàn),為您提供專業(yè)的成都網(wǎng)站建設(shè)、成都營(yíng)銷網(wǎng)站建設(shè)及網(wǎng)站設(shè)計(jì)開發(fā)服務(wù)!
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域一個(gè)空白頁面,防止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);
};
/*
*設(shè)置代理頁的hash值,需要A域傳給B域hostname
*/
this.setHash=function(){
var aSearch=document.location.search.match(/hostname=([^&]+)/);
if(!!aSearch){
//設(shè)定代理頁面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);
//動(dòng)態(tài)設(shè)置代理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);
}
};
};
當(dāng)前文章:Iframe跨域自適應(yīng)高度(兼容IE/Firefox)終極解決方案
網(wǎng)站地址:http://bm7419.com/article34/eeoope.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站策劃、品牌網(wǎng)站設(shè)計(jì)、標(biāo)簽優(yōu)化、關(guān)鍵詞優(yōu)化、自適應(yīng)網(wǎng)站、網(wǎng)站內(nèi)鏈
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容