1

内嵌iframe页面在IOS下会受内部元素影响自动撑开的问题

 5 months ago
source link: https://mirari.cc/posts/2018-05-30-issue_with_embedded_iframe_pages_expanding_due_to_internal_element_impact_on_ios
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

内嵌iframe页面在IOS下会受内部元素影响自动撑开的问题

2018-05-30-2023-12-04
271-2m

IOS下的webview页面，内嵌iframe元素，将其样式指定为宽高100%：

css
.iframe {
  width: 100%;
  height: 100%;
}

在安卓下运行均无问题，但是在IOS下会出现异常。

具体表现为iframe页面内的子元素一旦超出原先的边界，只要能影响到html元素的宽高，就会自动撑开iframe，即使html元素设置了overflow:hidden也没用。 比如一个body元素下的弹层需要从下往上滑动进场，这个弹层的位置就会导致html高度的变化，因此页面底部的tabbar就会在弹层运动期间先消失再出现。

解决方法就是使用具体的宽高数值锁定iframe元素：

javascript
function onLoadIFrame (index) {
  // 修复IOS下轮播图初始化瞬间会让iframe宽度自行扩大问题
  if (this.ENV.isIOS) {
    const iframe = this.$el.querySelector('#iframe' + index)
    iframe.style.width = iframe.clientWidth + 'px'
    iframe.style.height = iframe.clientHeight + 'px'
  }
}

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK