您现在的位置是：首页 > 文章详情

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

日期：2018-01-06点击：563收藏

接着昨天的工作如何根据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

 
        <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

1	`<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，如需转载请自行联系原作者

原文链接：https://yq.aliyun.com/articles/336646

关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有，本站原创内容转载请注明来源。

Java分享