关于iframe自适应高度的讨论可以先看看口碑UED的博客 http://ued.koubei.com/?p=1217
大概原理见下图:
可以直接看示例：http://lzlu.com/lab/loader/
下面直接上代码了
下面是核心代码loader.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
/**
* 跨域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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!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一定要与最面的页面是同域的。
1157
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
