接着昨天的工作 如何根据iframe内嵌页面调整iframe高宽 来说，按照文章中说的第二种方法实现代码如下：
实现
A.com/detail/view 页面的iframe代码如下：
|
1
|
<iframe id=
"thirdiframe"
src=
"http://B.com/location/testiframe"
width=
"100%"
scrolling=
"no"
frameborder=
"0"
height=
"900"
></iframe>
|
B.com是第三方的域名，所以要求在B.com/location/testiframe的页面增加下面的html
|
1
2
3
|
<iframe id=
"aiframe"
src=
"#"
style=
"display:none"
></iframe>
<script type=
"text/javascript"
>this.document.getElementById(
"aiframe"
).src=
"http://A.com/detail/iframe?height="
+ window.innerHeight;</script>
A.com/deatil/iframe是A提供的动态接口，返回的数据是一段js：
|
|
1
|
<script type=
"text/javascript"
>parent.parent.document.getElementById(
"thirdiframe"
).style.height=
"20px"
;</script>
|
这段中的20px是根据参数来生成的
基本这样就可以了。但是在同事的提醒下，考虑到后面几个问题：
1 动态接口的安全问题
A.com/detail/iframe?height=20
会返回一段js，而这里返回的js是带传入参数的。所以这里很有可能会出现反射型XSS。
所以在安全性上要注意一下，需要对height参数进行验证，比如使用php的intval这个函数来一劳永逸。
2 让B这个第三方嵌入一套html代码好吗？
这里不讨论B是否允许嵌入的商务问题。即使B允许嵌入了，但是以后万一想修改这个代码，还需要去让B来修改。
实际上让B嵌入一个A域名的js
|
1
|
|
这个js：http://A.com/detail/iframejs 是A提供的一个js，它受A（我方）控制，所以，这个逻辑就可以由A方进行控制了
这个js返回的内容如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
function
initA() {
var
iframeA = document.createElement(
'iframe'
);
iframeA.style.display=
'none'
;
iframeA.id=
'iframeA'
;
document.body.appendChild(iframeA);
}
function
updateAHeight(height) {
if
(document.getElementById(
'iframeA'
) == null) {
init360();
}
var
iframeA = document.getElementById(
'iframeA'
);
}
if
(window.addEventListener) {
window.addEventListener(
'load'
, initA, false);
}
else
{
window.attachEvent(
'onload'
, initA);
}
|
对上面的一段代码，注意几点：
a 当页面加载完成之后再执行initA事件，需要使用addEventListener和attachEvent函数，不应该直接把document.onload来执行，因为B的页面本身可能会有绑定其他事件。
b addEventListener是firefox，chrome等使用的事件加绑定的函数，而attachEvent是IE使用的事件加绑定事件，所以需要分开来做。
c 这里为什么提供一个updateAHeight函数呢？因为有可能B的页面高度会进行变化，那么当B的页面高度变化的时候有没办法改变A的iframe的高度呢？
有两种方法：
c.1 B在改变页面高度的事件上调用一个函数，来修改B页面的iframe的src，其中，这里的updateAHeight就是这个用处的
c.2 做循环，循环体内就是将当前页面的高度设置值，传递给iframe，这个循环当然可以给http://A.com/detail/iframejs 这个js来做的。
总结
原本以为很简单的一个事情，整一整还可以整出这么多名堂，话说也好久没写js了。。。代码啥的，都是技术熟练活啊。。。
本文转自轩脉刃博客园博客，原文链接：http://www.cnblogs.com/yjf512/p/3457737.html，如需转载请自行联系原作者
