前端录网站,记录前端点点滴滴,帮助程序猿快速成长!

跨域iframe高度自适应实现方案

js

跨域iframe高度自适应实现方案

背景

大多数应用平台中会通过iframe的方式插入跨站的应用。大多数时候基本上能满足需求,但是如果遇到一些比较特殊的应用,他们的高度并不是固定的,会随着应用内容而变化。虽然会有滚动条的出现,但是这样从某种程度上会影响到页面的美观。于是乎,有没有一种方案可以让iframe的高度随着iframe内容而变化呢?

尝试

  • 通过javascript获取iframe的内容高度。设置iframe的告诉和内容高度相同。

    这种方案在同域的情况下百试不爽,但是缺点是在跨域的情况下,却无能为力。

  • 在iframe里面引入一段js,通过js实时检测iframe内容的高度,发送到服务器。嵌入iframe的页面不停的从服务器获取传过来的iframe的高度,并设置。

    这种方案,确实可以解决问题,但是却有些令人不爽的地方。

    • 不停的向服务器发送数据,增加量服务器的负担。

    • Javasript 不停的请求服务器,获取新的高度。这种不停的轮询,也确实让人蛋疼。

  • 在上面的基础上如果能避开服务器,不失为是一种好方法,但是如何才能避开服务器呢?

    我们尝试了cookie、local storage等等,希望能有一种方案可以跨过域的限制,但都以失败告终。

    最后,突然灵光一现,如果能通过一层代理作为桥梁解决跨域的问题,那么所有的问题不就会迎刃而解了么?

方案

域!我们通过上面的实验已经在iframe插入了一段js,这就意味着我们可以随意的控制iframe里面的内容了。这时候如果我们在iframe中通过js插入一个iframe地址和最外面的页面是同域的话,是不是就可以通讯了呢?于是就有了下面的模型

a.com/index.html


a.com/iframe.js


a.com/height.html



通过上面的代码我们惊奇的发现,height.html确实可以取到a.com/index.html里面的东西。

实现

于是乎,问题就简单了,只要把iframe的高度传给index.html就ok了,改写代码如下

a.com/iframe.js



a.com/height.html


总结

问题解决了,满身的轻松,该方案的主要方法就是在iframe创建一个同源的iframe,通过地址传递iframe的高度,这样的话就可以打通iframe和外界的联系,实现了高度的自适应。



转载请注明:前端录»跨域iframe高度自适应实现方案