iframe高度自适应
前两天在网上看到了一道面试题，问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高度自适应的更多相关文章
- iframe高度自适应（同域）
今天解决了iframe高度自适应的问题,不过这只是同域下的页面嵌入,以下是代码: function SetCwinHeight(){ var iframeid = document.getElemen ...
- iframe高度自适应内容
JS自适应高度,其实就是设置iframe的高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹.对于用户体验和网站美观起着重要作用. 如果内容是固定的,那么我们可以通过CSS来给它直接定义一个高 ...
- 完美实现跨域Iframe高度自适应【Iframe跨域高度自适应解决方案】
Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的“BUG”就是iframe的高度无法自动适应,这一点让很多 ...
- IFrame 高度自适应的两种方式 .
iframe 高度自适应一般是指: iframe 本身的高度 = 内容高度. 这样做可以使最外层不出现滚动条. 如果网页内容使用了Ajax方式填充内容的话. 由于内容是动态的. 以上方式应该变为: ...
- 兼容firefox的iframe高度自适应代码
网上关于iframe高度自适应的代码有很多,但比较杂乱,本文根据实用性整理了以下代码: JavaScript部分: 折叠JavaScript Code复制内容到剪贴板 <script type= ...
- 跨域iframe高度自适应(兼容IE/FF/OP/Chrome)
采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 由于客户端js使用浏览器的同源安全策 ...
- 跨域iframe高度自适应（兼容IE/FF/OP/Chrome）
采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 由于客户端js使用浏览器的同源安全策 ...
- 谷歌、火狐浏览器下实现JS跨域iframe高度自适应的完美解决方法，跨域调用JS不再是难题！
谷歌.火狐浏览器下实现JS跨域iframe高度自适应的解决方法 导读:今天开发的时候遇到个iframe自适应高度的问题,相信大家对这个不陌生,但是一般我们都是在同一个项目使用iframe嵌套页面,这个 ...
- CSS完美实现iframe高度自适应（支持跨域）
Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的"BUG"就是iframe的高度无法自 ...
随机推荐
- Spring MVC和CXF集成
前提: 1.spring mvc环境已搭建好,能跑起来. 2.下载apache-cxf-2.7.3.zip的压缩包,解压apache-cxf-2.7.3.zip压缩包,拷贝如下几个jar包即可. 配置 ...
- KnockoutJS 3.X API 第六章 组件(5) 高级应用组件加载器
无论何时使用组件绑定或自定义元素注入组件,Knockout都将使用一个或多个组件装载器获取该组件的模板和视图模型. 组件加载器的任务是异步提供任何给定组件名称的模板/视图模型对. 本节目录 默认组件加 ...
- Conditional Split component 用法
Conditional Split 用于将数据流按照条件进行拆分,每一个output 都有name和condition. 数据流逐行按照condition进行match,如果match,那么改行会进入 ...
- android表白app
一.前言 马上就要520和521了,是不是还有像我一样的单身狗啊.我就知道有,所以这两天简单写了这个小程序(其实是替别人写的),虽然我并不会用去骗女孩子(因为最近太忙了,实习完之后要搞毕设,要搞论文啊 ...
- 【原创】开源Math.NET基础数学类库使用(14)C#生成安全的随机数
本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新 开源Math.NET基础数学类库使用总目录:[目录]开源Math.NET基础数学类库使用总目录 前言 ...
- NFS Volume Provider（Part III） - 每天5分钟玩转 OpenStack（64）
今天我们将前一小节创建的 NFS volume “nfs-vol-1” attach 到 instance “c2”上. 这里我们重点关注 nova-compute 如何将“nfs-vol-1” at ...
- AngularJs 动态加载模块和依赖
最近项目比较忙额,白天要上班,晚上回来还需要做Angular知识点的ppt给同事,毕竟年底要辞职了,项目的后续开发还是需要有人接手的,所以就占用了晚上学习的时间.本来一直不打算写这些第三方插件的学习笔 ...
- RSA密钥,JAVA与.NET之间转换
最近在做银联的一个接口,用到RSA签名,悲剧来了,.net用的RSA密钥格式和JAVA用的不一样 .net为XML格式 <RSAKeyValue><Modulus>53Knuj ...
- Oracle库Delete删除千万以上普通堆表数据的方法
需求:Oracle数据库delete删除普通堆表千万条历史记录. 直接删除的影响: 1.可能由于undo表空间不足从而导致最终删除失败的问题: 2.可能导致undo表空间过度使用,影响到其他用户正常操 ...
- Entity FrameWork 365日系列文章源码研究 （1）
By KMSFan -- 此系列的文章只作为自己的读书笔记,不纳入博客园首页. 总结的知识点: 1.DBContext 类 2.Attribute里的属性(NotNull) 3.DbContext实 ...