前两天在网上看到了一道面试题，问iframe高度自适应的问题。发现自己之前几乎没有关注过iframe的问题，所以在这里记录一下。

原题目是： 页面A的域名是：http://www.taobao.com,页面B的域名是http://www.tmall.com，如果A使用iframe引用页面B，如何做到iframe的高度自适应（即B内容有多高，iframe就有多高）

在这里首先分析一下如果不涉及跨域或者只是主域相同，子域不同的情况下的解决方案：

父页面代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">

     <title>Document</title>

 </head>

 <body>

 <iframe id="iframe1" name="iframe1" src="http://www.iframe.com" frameborder="0" style="width:100%"></iframe>

     <script>

         // document.domain = "iframe.com"; 主域相同，子域不同

         function setIframe(childrenIF) {

             // contentWindow 兼容各个浏览器，可取得子窗口的 window 对象。

             // contentDocument Firefox 支持，> ie8 的ie支持。可取得子窗口的 document 对象。

             var childrenWin = childrenIF.contentWindow || childrenIF.contentDocument.parentWindow;

             if (childrenWin.document.body) {

                 // document.documentElement返回文档对象（document）的根元素（例如，HTML文档的 <html> 元素）。

                 childrenIF.height = childrenWin.document.documentElement.offsetHeight || childrenWin.document.body.offsetHeight;

             }

         }

         window.onload = function() {

             setIframe(document.querySelector('#iframe1'));

         }

     </script>

 </body>

 </html>

看到张鑫旭的博客里说到另一种方法，是在iframe页面传递一个参数给父页面，告知其高度。父页面取到参数后再给iframe高度赋值。

大致原理在子页面iframe里定义

// 为了防止window.location.hash产生跨域问题，可以直接写死hostUrl地址：利用window.top.location = 父页面地址(写死) + 锚点
var hostUrl = window.location.hash.slice(1);

hostUrl += "#height=" + 1294;

window.top.location = hostUrl;

然后将子页面嵌入到父页面中，父页面提取location中的height数值，从而更改iframe高度。

var iframeHeight = function() {

    var hash = window.location.hash.slice(1);

    if (hash && /height=/.test(hash)) {

        iframe.height = hash.replace("height=", "");

    }

    setTimeout(iframeHeight, 200);

};

iframeHeight();

可以参考：小tip：iframe高度动态自适应

这里思考了一下是不是可以不写死页面的地址：

假设面试题目中提到的页面A:www.taobao.com内部嵌入页面B:www.tmall.com页面，要让B页面高度自适应的解决方案

参考各种资料，可以利用中间代理页面agent.html来完成。

主要原理是agent页面和A页面同源，将agent页面嵌入到B页面获取到B页面宽高后，通过url传递宽高值。通过agent来操作A页面中嵌入的B页面宽高。

1. 在A(taobao)页面嵌入iframe

<iframe src="http://www.tmall.com" id="Iframe" frameborder="0" scrolling="no" style="border:0px;"></iframe>

2. 在B(tmall)页面嵌入agent_iframe，获取B页面的宽高。(将获取到的宽高通过url传递)

<iframe id="agent_iframe"  height="0" width="0"  src="http://www.taobao.com/agent.html" style="display:none" ></iframe>

<script type="text/javascript">

    (function autoHeight(){

        var tmall_width = Math.max(document.body.scrollWidth,document.body.clientWidth);

        var tmall_height = Math.max(document.body.scrollHeight,document.body.clientHeight);

        var agent_iframe = document.getElementById("agent_iframe");

        // 这里通过hash传递tmall的宽高

        agent_iframe.src = agent_iframe.src + "#" + tmall_width + "|" + tmall_height;

    })();

</script>

3.  在agent.html插入代码（因为agent和A页面是相同域名，所以可以通过子元素来控制父元素的父元素［因为agent是嵌入在B页面的，B页面嵌入在A页面，因此agent可以控制A页面的元素，此处为多层嵌套，有点绕］的宽高）

<script type="text/javascript">

    var tmall_iframe = window.parent.parent.document.getElementById("Iframe");

    var hash_url = window.location.hash;

    if (hash_url.indexOf("#")>=0){

        var hash_width = hash_url.split("#")[1].split("|")[0]+"px";

        var hash_height = hash_url.split("#")[1].split("|")[1]+"px";

        tmall_iframe.style.width = hash_width;

        tmall_iframe.style.height = hash_height;

    }

</script>

总结

个人认为，如果父页面的地址是固定的，我觉得直接写死地址是比较方便直观的方法。当然还有很多其他方法可以实现高度自适应。

详见：iframe高度自适应的6个方法

iframe高度自适应的更多相关文章

  1. iframe高度自适应（同域）

    今天解决了iframe高度自适应的问题,不过这只是同域下的页面嵌入,以下是代码: function SetCwinHeight(){ var iframeid = document.getElemen ...

  2. iframe高度自适应内容

    JS自适应高度,其实就是设置iframe的高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹.对于用户体验和网站美观起着重要作用. 如果内容是固定的,那么我们可以通过CSS来给它直接定义一个高 ...

  3. 完美实现跨域Iframe高度自适应【Iframe跨域高度自适应解决方案】

    Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的“BUG”就是iframe的高度无法自动适应,这一点让很多 ...

  4. IFrame 高度自适应的两种方式 .

    iframe 高度自适应一般是指: iframe 本身的高度 =  内容高度. 这样做可以使最外层不出现滚动条. 如果网页内容使用了Ajax方式填充内容的话. 由于内容是动态的. 以上方式应该变为: ...

  5. 兼容firefox的iframe高度自适应代码

    网上关于iframe高度自适应的代码有很多,但比较杂乱,本文根据实用性整理了以下代码: JavaScript部分: 折叠JavaScript Code复制内容到剪贴板 <script type= ...

  6. 跨域iframe高度自适应(兼容IE/FF/OP/Chrome)

    采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 由于客户端js使用浏览器的同源安全策 ...

  7. 跨域iframe高度自适应（兼容IE/FF/OP/Chrome）

    采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 由于客户端js使用浏览器的同源安全策 ...

  8. 谷歌、火狐浏览器下实现JS跨域iframe高度自适应的完美解决方法，跨域调用JS不再是难题！

    谷歌.火狐浏览器下实现JS跨域iframe高度自适应的解决方法 导读:今天开发的时候遇到个iframe自适应高度的问题,相信大家对这个不陌生,但是一般我们都是在同一个项目使用iframe嵌套页面,这个 ...

  9. CSS完美实现iframe高度自适应（支持跨域）

    Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的"BUG"就是iframe的高度无法自 ...

随机推荐

  1. 修改HTML5 input placeholder 颜色及修改失效的解决办法

    input::input-placeholder{color: #bdbdbd ;} /* 有些资料显示需要写,有些显示不需要,但是在编辑器webstorm中该属性不被识别 */ ::-webkit- ...

  2. javascript运动系列第五篇——缓冲运动和弹性运动

    × 目录 [1]缓冲运动 [2]弹性运动 [3]距离分析[4]步长分析[5]弹性过界[6]弹性菜单[7]弹性拖拽 前面的话 缓冲运动指的是减速运动,减速到0的时候,元素正好停在目标点.而弹性运动同样是 ...

  3. 剖析width、height继承

    在CSS这个一切皆为框的世界里,我们今天再来探究探究width与height. 我靠,width与height有什么好探究的,不就是设定元素的宽.高吗?大不了还要区分标准盒子模型和IE盒子模型的区别, ...

  4. 2014年百度之星程序设计大赛 - 初赛（第二轮）Chess

    题目描述:小度和小良最近又迷上了下棋.棋盘一共有N行M列,我们可以把左上角的格子定为(1,1),右下角的格子定为(N,M).在他们的规则中,“王”在棋盘上的走法遵循十字路线.也就是说,如果“王”当前在 ...

  5. geotrellis使用（十八）导入多波段Tiff、读取多波段Tile

    Geotrellis系列文章链接地址http://www.cnblogs.com/shoufengwei/p/5619419.html 目录 前言 多波段数据导入 读取多波段瓦片 提取单波段 总结 一 ...

  6. react-native 学习之TextInput组件篇

    /** * Sample React Native App * https://github.com/facebook/react-native */ 'use strict'; import Rea ...

  7. c3p0数据库连接池的使用详解

    首先,什么是c3p0?下面是百度百科的解释: C3P0是一个开源的JDBC连接池,它实现了数据源和JNDI绑定,支持JDBC3规范和JDBC2的标准扩展.目前使用它的开源项目有Hibernate,Sp ...

  8. HTML5 视频（一）

    HTML5 提供了展示视频的标准 今天,大多数视频是通过插件(比如 Flash)来显示的.然而,并非所有浏览器都拥有同样的插件. HTML5 规定了一种通过 video 元素来包含视频的标准方法. 一 ...

  9. WebGIS中兴趣点简单查询、基于Lucene分词查询的设计和实现

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.前言 兴趣点查询是指:输入框中输入地名.人名等查询信息后,地图上可 ...

  10. Access数据库多表连接查询

    第一次在Access中写多表查询,就按照MS数据库中的写法,结果报语法错,原来Access的多表连接查询是不一样的 表A.B.C,A关联B,B关联C,均用ID键关联 一般写法:select * fro ...