关于iframe自适应高度的讨论可以先看看口碑UED的博客http://ued.koubei.com/?p=1217
大概原理见下图:
可以直接看示例:http://lzlu.com/lab/loader/
下面直接上代码了
下面是核心代码loader.js
/**
* 跨域iframe自适应高度解决方案
* Author: changyin@taobao.com <http://www.lzlu.com>
* Copyright (c) 2011, Taobao Inc. All rights reserved.
*/
var Loader = new function(){
var doc = document,body = doc.body,
self = this,
//获取url中的参数
getRequest = function(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i"),
r = window.location.search.substr(1).match(reg);
return (r!=null)? unescape(r[2]) : null;
},
//获取配置,script的优先级大于url中的参数
getConfig = function(){
var scripts = doc.getElementsByTagName('script'),
script = scripts[scripts.length - 1];
return function(param){
var p = script.getAttribute(param);
return p? p : getRequest(param);
};
}(),
//代理高度
proxyheight = 0,
//top页frame的id
frameid = getConfig("data-frameid"),
//监听实时更新高度间隔
timer = getConfig("data-timer"),
//获取代理的url
getProxyuUrl = getConfig("data-proxy"),
//创建代理的iframe
proxyframe = function(){
var el = doc.createElement("iframe");
el.style.display = "none";
el.name="proxy";
return el;
}();
//重置高度
this.resize = function(){
proxyheight = body.offsetHeight;
proxyframe.src = getProxyuUrl + "?data-frameid=" + frameid+ "&data-frameheight=" + (proxyheight+40);
}
this.init = function(){
var init = function(){
body.appendChild(proxyframe);
self.resize();
//是否update
if(!isNaN(timer)){
timer = timer<500?500:timer;
window.setInterval(function(){
if(body.offsetHeight != proxyheight){
self.resize();
}
},timer);
};
};
if(doc.addEventListener){
window.addEventListener("load",init,false);
}else{
window.attachEvent("onload",init);
}
//如果引入了JS框架,建议将上面一句改掉 例如:KISSY.ready(function(){init();});
}
};
Loader.init();
————————-
代理文件proxy.html
<!DOCTYPE
html>
<
html
>
<
head
>
<
title
>proxy</
title
>
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html;
charset=utf-8"
></
head
>
<
body
>
<
script
>
(function()
{
var
getRequest = function(name) {
var
reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i"),
r
= window.location.search.substr(1).match(reg);
return
(r!=null)? unescape(r[2]) : null;
},
height
= getRequest("data-frameheight");
try
{
var
el = window.top.document.getElementById(getRequest("data-frameid"));
if
(!el) return;
el.style.height
= height + 'px';
}
catch
(e) {
//console.log(e);
}
})();
</
script
>
</
body
>
</
html
>
————————-
使用方法:
一、在主页面要包含的iframe中引入loader.js
二、传入参数。有两种传参方法:
1.在主页面引用iframe的时候传参,将参数接在要引用的iframe的url后面
例如:<iframe id=”testframe” src=”a.html?data-frameid=testframe&data-auto=200&data-proxy=proxy.html”></iframe>
2.iframe页面包含loader.js的时候传入
例如:<script src=”loader.js” data-frameid = “testframe” data-timer = “2000″ data-proxy = “proxy.html” ></script>
如果闲麻烦直接按照示例 http://lzlu.com/lab/loader/写就行了,注意proxy.html一定要与最面的页面是同域的。
分享到:
相关推荐
完美解决跨域iframe的高度自适应,完美解决跨子域iframe的高度自适应,嵌入几个页面解决跨域iframe的高度自适应。。。
iframe跨域嵌套自适应高度 iframe跨域嵌套 丢失session值(针对嵌套asp.net 做的网站)
iframe 跨域 自适应高度 模板 iframe 跨域 自适应高度 模板 iframe 跨域 自适应高度 模板
这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能,其中包括: 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域...
可以实现Iframe跨域自适应高度 main.htm和agent.htm文件放在www.a.com域内 iframe.htm放在www.b.com域内 这样就可以通过a.com域中的main.htm文件访问b.com域中的iframe.htm文件了
www.baidu.com,假设地址:http://www.baidu.com/b.html 实现效果: A域名下的页面a.html中通过iframe嵌入B域名下的页面b.html,由于b.html的宽度和高度是不可预知而且会变化的,所以需要a.html中的iframe自适应大小....
有个在线例子,访问地址:http://okiner.cn/demo/cross-domain/iframe.html,这是源码,方便下载
介绍: 填写的嵌入地址一定要和本页面在同一个站点上,否则会提示“拒绝访问!”。对跨域引用有权限问题,请查阅其他资料。
有个在线例子,访问地址:http://okiner.cn/demo/cross-domain/iframe.html,这是源码,方便下载
iframe 跨域 自动适应高度;iframe 跨域 自动适应高度;
Iframe自适应高度一直都备受关注,接下来为大家介绍下同域名下Iframe自适应高度的处理以及跨域时Iframe高度自适应,感兴趣的朋友可以参考下哈
这是关于iframe使用过程中出现的问题整理的解决方法,关于使用iframe不用单独写接口打通数据,直接把数据通过ifarme嵌套方法传递过去,使用简单方便。
前几天做公司和开心网合作项目的时候 碰到iframe 跨域自适应的问题刚开始很迷惑 开心网那边技术工程师给我发了一段这样子的代码。
最近在做项目中,遇到一个问题,就是iframe高度的自适应问题,以下是解决办法
采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引 发出同域、跨域两种情况。 同域时Iframe高度自适应 下面的代码兼容IE/Firefox浏览器,控制id为...
A域名下的页面a.html中通过iframe嵌入B域名下的页面b.html,由于b.html的宽度和高度是不可预知而且会变化的,所以需要a.html中的iframe自适应大小. 问题本质: js对跨域iframe访问问题,因为要控制a.html中iframe的...
关于iframe之间的通信问题与自适应高度问题网上有很多,那么这篇文章小编也和大家一起来谈谈iframe之间通信问题及iframe自适应高度问题,有需要的可以参考借鉴。