这种复杂的iframe自适应如何做

ziluopao 发布于 2016/10/31 09:27
阅读 387
收藏 0

先说前提:

  • 在响应式下要求引用站外的iframe自适应其父窗口的大小。
  • 引用的站外iframe的宽度和高度是一固定值。

探讨:

先拿一个实物来说事吧!

比如下面这个iframe


<iframe frameborder="0" width="640" height="498" src="http://v.qq.com/iframe/player.html?vid=j0187bxjv1k&tiny=0&auto=0" allowfullscreen></iframe>

其宽和高分别是640和498,此iframe放在一div中,该div容器的宽度是100%它会随播放屏幕大小不同而变化。此时问题来了,因为iframe的宽高是一固定值,所以有时大于容器,有时小于容器。如何解决随容器大小的改变,iframe正好撑满容器中呢?

当然,重置一下iframe的宽和高是必须的,如iframe----->width:100%;可此时问题来了,高度的大小如何配置呢?当然用js来控制。

这里还有一个探讨问题的前提,那就是本题用js原生探讨而不用jquery这些框架。

加载中
0
jiuker
jiuker
display:flex可以做到
ziluopao
ziluopao
不是说了吗,用原生!
0
zabcd117
zabcd117
如果是跨域的iframe,是做不到的,因为浏览器有同源策略,不是同一个源的,会有安全性限制。
0
张亦俊
张亦俊

反正我也没太看懂需求,只能跟你讲一句话,用jquery能写出来,用原生肯定能写,只是有时候会麻烦点,所以你那个前提毫无意义。

还有就是,楼上那个display: flex是CSS,跟啥jquery都没关系。

张亦俊
张亦俊
回复 @ziluopao : 因为我没看懂你的问题到底是啥,响应式不外乎两招终极绝招,媒体查询和resize事件,你都试试呗。如果这俩都搞不定,那就是天坑了。
ziluopao
ziluopao
你好象喜欢讨论前提,而我关心的是前提下解决问题的思路!
0
jiuker
jiuker
能用css干嘛用jq,搞不懂
返回顶部
顶部