您当前的位置: 首页 > 前端教程 > HTML教程 > Iframe跨域自适应高度(兼容IE/Firefox)终极解决方案

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

作者:不详 来源:网络 发布时间: 2011-12-21 14:12 点击:
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')

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)终极解决方案"由远航站长收集整理而来,仅供大家学习与参考使用。更多网站制作教程尽在远航站长站。
顶一下
(0)
0%
踩一下
(0)
0%
[点击 次] [返回上一页] [打印]
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 密码: 验证码:
关于本站 - 联系我们 - 网站声明 - 友情连接- 网站地图 - 站点地图 - 返回顶部
Copyright © 2007-2013 www.yhzhan.com(远航站长). All Rights Reserved .
远航站长:为中小站长提供最佳的学习与交流平台,提供网页制作与网站编程等各类网站制作教程.
官方QQ:445490277 网站群:26680406 网站备案号:豫ICP备07500620号-4