2020-4-19 seo達人
IOS下的webview頁面,內(nèi)嵌iframe元素,將其樣式指定為寬高100%:
.iframe { width: 100%; height: 100%;
}
在安卓下運行均無問題,但是在IOS下會出現(xiàn)異常。
具體表現(xiàn)為iframe頁面內(nèi)的子元素一旦超出原先的邊界,只要能影響到html元素的寬高,就會自動撐開iframe,即使html元素設置了overflow:hidden
也沒用。
比如一個body元素下的彈層需要從下往上滑動進場,這個彈層的位置就會導致html高度的變化,因此頁面底部的tabbar就會在彈層運動期間先消失再出現(xiàn)。
解決方法就是使用具體的寬高數(shù)值鎖定iframe元素:
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' }
}