如何根据iframe内嵌页面调整iframe高宽续篇

简介:

接着昨天的工作 如何根据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
<script type= "text/javascript"  src= "http://A.com/detail/iframejs" ></script>

这个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.src= 'http://A.com/detail/iframe?height='  + window.innerHeight;
     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' );
     iframeA.src= 'http://A.com/detail/iframe?height='  + height;
}
 
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了。。。代码啥的,都是技术熟练活啊。。。

目录
相关文章
|
1月前
|
XML 前端开发 JavaScript
深入探究iframe:网页嵌入的魔法盒子(下)
深入探究iframe:网页嵌入的魔法盒子(下)
|
1月前
|
JavaScript 前端开发 安全
深入探究iframe:网页嵌入的魔法盒子(上)
深入探究iframe:网页嵌入的魔法盒子(上)
|
1月前
|
前端开发
SAP UI5 应用如何使用 iframe 嵌入其他 HTML 页面试读版
SAP UI5 应用如何使用 iframe 嵌入其他 HTML 页面试读版
52 0
|
应用服务中间件 Apache nginx
iframe 嵌入页面?才不是那么轻轻松松!
iframe 嵌入页面?才不是那么轻轻松松!
1061 0
将某个网站嵌入到iframe的测试
将某个网站嵌入到iframe的测试
213 0
将某个网站嵌入到iframe的测试
|
JavaScript 前端开发 Go