接着昨天的工作如何根据iframe内嵌页面调整iframe高宽来说，按照文章中说的第二种方法实现代码如下：

实现

A.com/detail/view 页面的iframe代码如下：

                            <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

<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：

                            <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

                            <script type="text/javascript" src="http://A.com/detail/iframejs"></script>
                        

这个js：http://A.com/detail/iframejs 是A提供的一个js，它受A（我方）控制，所以，这个逻辑就可以由A方进行控制了

这个js返回的内容如下：

                                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了。。。代码啥的，都是技术熟练活啊。。。

本文转自轩脉刃博客园博客，原文链接：http://www.cnblogs.com/yjf512/p/3457737.html，如需转载请自行联系原作者

如何根据iframe内嵌页面调整iframe高宽续篇相关推荐

php退出页面父元素,jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码...
iframe和弹窗这些词对于js高手来说都是耳熟能详的东西,作为一个新人来说,还在学习阶段的我就在工作中遇到这么一个奇葩的需求,要在引入的iframe页面里做一个全屏化的功能. 粗略一看,这还不容易, ...
selenium登录斗鱼tv（切换iframe内嵌页面）
from selenium.webdriver import Chrome import time# 1.下载selenium # 2.将驱动放在python解释器文件夹中web = Chrome() ...
chrome浏览器跨域Cookie的SameSite问题导致访问iframe内嵌页面异常
问题还原通过cas单点登陆访问系统,通过一个系统内嵌入第三方系统的页面,同时第三方系统也配置了cas.访问一个系统跳转到登陆页面,然后内嵌入iframe中的第三方系统又进入登陆页面. 初步分析,该系 ...
如何去掉iframe内嵌页面头部/底部（iframe取部分网页）
请看如下代码红色部分就是你需要加进去的 <iframe style="margin-top:-150px;width:950px;display:block;" frame ...
iframe内嵌框架自适应高度
添加js代码: /iframe内嵌框架自适应高度/ function iFrameHeight() { var ifm= document.getElementById("iframepag ...
vue框架中使用iframe内嵌网页，并且双击实现网页全屏放大
vue框架中使用iframe内嵌网页,并且双击实现网页全屏放大利用Iframe插入网页 <iframe ref="iframe" src="https://www ...
form表单的使用，iframe内嵌标签
一.form表单,表单名称使用name action 把当前表单中的数据提交到哪个程序去处理后端功能接口 method 表单的提交方式常用的两种方式, get:可以缓存到浏览器中,有长度限制(204 ...
iframe 内嵌第三方网站 cookie 失效，解决办法
iframe 内嵌第三方网站 cookie 失效,解决办法网站iframe内嵌第三方带登录页的网站时,在ie和火狐和部分谷歌浏览器是可以的,但是在升级版的谷歌浏览器中是无法访问的问题是谷歌浏览器在 ...
iframe内嵌高德地图搜索
iframe内嵌高德地图搜索
iframe内嵌框架的强大
<iframe frameborder="0" style='border:0px;width:"+width+"px;height:"+hei ...

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

接着昨天的工作如何根据iframe内嵌页面调整iframe高宽来说，按照文章中说的第二种方法实现代码如下：

实现

1 动态接口的安全问题

2 让B这个第三方嵌入一套html代码好吗？

a 当页面加载完成之后再执行initA事件，需要使用addEventListener和attachEvent函数，不应该直接把document.onload来执行，因为B的页面本身可能会有绑定其他事件。

b addEventListener是firefox，chrome等使用的事件加绑定的函数，而attachEvent是IE使用的事件加绑定事件，所以需要分开来做。

c 这里为什么提供一个updateAHeight函数呢？因为有可能B的页面高度会进行变化，那么当B的页面高度变化的时候有没办法改变A的iframe的高度呢？

总结

如何根据iframe内嵌页面调整iframe高宽续篇相关推荐

最新文章

热门文章

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

接着昨天的工作 如何根据iframe内嵌页面调整iframe高宽 来说，按照文章中说的第二种方法实现代码如下：

实现

1 动态接口的安全问题

2 让B这个第三方嵌入一套html代码好吗？

a 当页面加载完成之后再执行initA事件，需要使用addEventListener和attachEvent函数，不应该直接把document.onload来执行，因为B的页面本身可能会有绑定其他事件。

b addEventListener是firefox，chrome等使用的事件加绑定的函数，而attachEvent是IE使用的事件加绑定事件，所以需要分开来做。

c 这里为什么提供一个updateAHeight函数呢？因为有可能B的页面高度会进行变化，那么当B的页面高度变化的时候有没办法改变A的iframe的高度呢？

总结

如何根据iframe内嵌页面调整iframe高宽续篇相关推荐

最新文章

热门文章

接着昨天的工作如何根据iframe内嵌页面调整iframe高宽来说，按照文章中说的第二种方法实现代码如下：