iframe js自适应高度

来源：互联网发布：linux cp命令文件夹编辑：程序博客网时间：2024/05/19 03:23

iframe在实际开发中应该算是比较常见的，在一些情况下iframe的高度是不确定，甚至是时时变化的

一般这种情况会有下面几种情况：

1、父页面和iframe页面在同一个域下，这种情况最好解决。在iframe页面里通过window.parent即可定位到父页面的window对象，然后，通过定时器来检测iframe页面的高度变化，来设置父页面的相应容器的高度即可。

实例代码：

父页面：

<!DOCTYPE HTML><html lang="en-US"><head>  <meta charset="UTF-8">  <title></title></head><body>  <iframe src="041.php" id="if" frameborder="0"></iframe></body></html>

子页面：

<!DOCTYPE HTML><html lang="en-US"><head>  <meta charset="UTF-8">  <title></title></head><body style="background:red">  <script type="text/javascript">    (function(){      var doc = document,        //获取父页面的容器        par = window.parent.document.getElementById('if'),                body = doc.body,        div,height;        setTimeout(function (){        div = doc.createElement('br');        body.appendChild(div);        //当前页面的高度        height = body.offsetHeight;          //设置容器高度              par.style.height=height + 'px';        //定时来执行       // setTimeout(arguments.callee,300);      },100);    })();  </script>  <div class="span12"><h1>Demo</h1><p>WEB前端研发工程师，在国内算是一个朝阳职业，这个领域没有学校的正规教育，大多数人都是靠自己自学成才。本文主要介绍自己从事web开发以来（从大二至今）看过的书籍和自己的成长过程，目的是给想了解JavaScript或者是刚接触JavaScript的朋友，介绍如何通过循序渐进的看书来学习javascript。</p><p>一。 入门级 ：就是有一定的基础（比如最常见的HTML标签及其属性、事件、方法;最常见的CSS属性;基础的JavaScript编程能力），能够完成一些简单的WEB前端需求。</p><p>推荐：《JavaScript dom 编程艺术》</p><p>理由：此书绝对是入门的好书，本人也是在接触JS一段时间后才看的这本书。此书从JS的历史 - JS基础语法知识 - DOM介绍和简单的使用。现在这本书已经出了第二版，需要的朋友直接第二版就行。</p><p>评价：简洁，实用，详细，易懂，书不厚，相信很快就能看完。</p><p>当然，作为入门书的话《JavaScript权威指南》也非常强大（这名字可不是白起），其实说起来也惭愧，本人至今都没有买过这本书，最开始是因为这个书实在是小贵，只好借朋友的看，不过也就看了个周末。网上关于此书的评价很多，意思大概都是说这书就是一个JS的文档手册，如果你有闲钱，并且习惯翻书查询，那么就来一本吧。顺便提醒一句，这本书的第六版英文版已经出来了。</p><p>二。初级开发：本人以前的DEV leader兼恩师这么说过："初级开发人员的标志就是需要在中级和高级开发的指导下完成工作"。首先不要苛责代码的对错严谨，毕竟每个程序员都有这样的一个过程，就是这个级别的特征。</p></div></body></html>

2、父页面和子页面不在同一个域下。

这种情况下，基于安全性的考虑，一些浏览器中通过window.parent就访问不到父页面的window对象，解决办法如下：

①在iframe里面B添加一个隐藏的iframe标签；

②iframe引用的文件C是和父页面在同一个域下面的；

③通过循环来检测B页面上中height的高度，并且设置给隐藏的iframe标签的地址中作为参数；

④在iframe页面c中也设置一个定时器来读取地址的值，可以获取b页面的高度；

⑤c页面可以通过window.parent访问到父页面的window对象，并设置相应容器的高度

实例代码：

父页面：

<!DOCTYPE HTML><html lang="en-US"><head>  <meta charset="UTF-8">  <title></title></head><body>  <div value="1">    <iframe id="aaa"  src="http://edsn.sinaapp.com/demo/iframe/b.html" frameborder="2px"></iframe>  </div>  </body></html>

b页面

<!DOCTYPE HTML><html lang="en-US">  <head>    <meta charset="UTF-8">    <title></title>  </head>  <body style="background:red">    <iframe id="p" src="http://sirzxj.sinaapp.com/iframe/2/c.html#" style="display:none" frameborder="2px"></iframe>    <script type="text/javascript">      (function(){        var doc = document,          body = doc.body,             g = doc.getElementById('p'),          src = g.src.split('#')[0] + '#',          br,height;        setTimeout(function(){          br = doc.createElement('br');          body.appendChild(br);          height = doc.body.offsetHeight;          g.src= src + height;          setTimeout(arguments.callee,500);        },500);        //alert()        g.src += 'abc';      })()    </script>  </body></html>

c页面：

<!DOCTYPE HTML><html lang="en-US"><head>  <meta charset="UTF-8">  <title></title></head><body>  <script type="text/javascript">    (function(){      var tops = window.top.document.getElementById('aaa');            setTimeout(function(){        var loc = window.location.href.split('#')[1];        tops.style.height = loc +'px';        setTimeout(arguments.callee,500);      },500);    })()  </script></body></html>

3，当子页面的iframe不同域，且无法操控时，即不能够在里面添加代码时候，是没有办法实现高度自适应的

引用：http://www.cnblogs.com/sirzxj/archive/2012/04/28/2475249.html

阅读全文

0 0