iframe 的高度自适应 iframe 内容页面的高度解决方案

赞赏 2016-04-10

提供两种iframe 的高度自适应 iframe 内容页面的方法


  • 方法一(不同浏览器兼容性太差)
 $("#iframe_id").load(function() {
       SetWinHeight(this);
   });

   function SetWinHeight(obj) {
       var win = obj;
       if (document.getElementById) {
           if (win) {
               win.height = 300;
               if (win.contentDocument && win.contentDocument.body.offsetHeight) {
                   win.height = win.contentDocument.body.offsetHeight;
               } else if (win.Document && win.Document.body.scrollHeight) {
                   win.height = win.Document.body.scrollHeight;
               } else if (win.ownerDocument && win.ownerDocument.body.scrollHeight) {
                   win.height = win.ownerDocument.body.scrollHeight;
               } else {
                   win.height = '400px';
               }
           }
       }
   }
  • 方法二(支持比较好,存在跨域的问题, 要求A C 同域名)
    • A 的 Aiframe 里面嵌套 B 页面
    • B 的 Biframe 里面嵌套 C 页面
    • 要求 Aiframe_height == B_document_height
    • B 页面需要 用js 完成: 等自己渲染完成之后获取自己页面的高度 B_document_height
    • 然后操作Biframe document.getElementById("Biframe_id").src = 'Ahost/Cpage.php?para='+ B_document_height + '&r=' + Math. random();
    • C 页面需要完成:获取参数 para 的值,然后赋值给同域A页面 Aiframe 的height
      <?php                                                                                                        
      $height = ceil(@$_GET["para"]);                                                                              
      ?>                                                                                                       
      <script>                                                                                               
      parent.parent.document.getElementById("Aiframe_id"").height = <?php echo $height;?>;
      </script>
登陆后阅读全文
阅读 1429 赞赏 0 有用 14 没用 0 收藏 8 分享

   


作者声明:本篇文章系本人原创,欢迎分享,但未经许可,谢绝转载。

0 条留言

有经验的老司机的头像

有经验的老司机

年轻人,走!我带你。

有料推荐

这世界欠我一个这样的老公!

高校学生模仿“世界名画”摆拍,可以说是戏精本精了

iPhone X 跌破发行价,苏宁200亿入股恒大 | 财经日日评

果然是高手!这次在日本,特朗普竹杠敲得不是一般狠

资深黄牛现身说法:iPhone X价格秒变不停,就像炒股一样

长一样的双胞胎也能识别?蚂蚁金服发布「眼纹识别」技术

苏联是怎么被阿富汗拖垮的?

美团或入局「分时租赁」共享汽车,王兴要大笔投入「泛出行」领域了? | 36氪独家

你或许被“一盘番茄炒蛋”刷屏了,但有人辛酸,有人质疑

iPhone X发售前夜,黄牛与苹果公司的不安

他的文章

电脑无线连接安卓手机 进入android命令行模式(完胜adb shell数据线连接方式)

iTerm2配置clone session功能

如何科学上网(翻墙)

php5.6-和php5.6 CURL 上传文件的一个坑

如何修改lumen storage path/log path

php.ini 设置了 error_log 为什么不生效?

IP查询二分法的运用

iframe 的高度自适应 iframe 内容页面的高度解决方案

手机扫一扫
分享文章