解決部分iphone上使用iframe標簽變寬的異常情況

Coder編程 2021-10-30

展開全文

iframe在部分iphone手機上變寬

如下圖：

百度查了很多也試了很多，最后的解決方式如下：

第一種：

我使用的是VUE

html代碼：

<!-- 對于iphone中scrolling必須是no，不要擔心一定會滾動的，對于安卓手機scrolling則是auto，否則在安卓移動端不會滾動 -->
<iframe id="iframe1" class="iframeCss" height="100%" width="100%" :src="url" frameborder="0" :scrolling="type"></iframe>

css代碼：

　.iframeCss {
    min-width: 100%;
    width: 3.75rem !important; //設(shè)置iframe寬度，這個也尤其重要
  }

JavaScript代碼：

//onload方法在mounted()中執(zhí)行
　　onload() {
　　　　//獲取iframe標簽
      var iframe = document.getElementById('iframe1')
      let _this = this
      iframe.onload = function() {
　　　　　// 判斷當前的移動端是否是蘋果系統(tǒng)
        var u = navigator.userAgent
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
        if (isiOS) {
          try {
　　　　　　　// 這個try catch可有可無
　　　　　　　// 我測試了幾遍自己程序，沒有這一塊代碼的話，頁面第一次展示的時候有可能頁面會變寬一下，但是很快就又正常了，看著變寬只是一個過渡，我不知道是我手機問題還是其他問題，這個沒有深究
            document.body.style.width = (window.screen.availWidth / document.body.clientWidth) * 100 + '%'
            var iframebody = iframe.contentWindow.document.body
            iframebody.style.width = document.body.clientWidth + 'px'
            // eslint-disable-next-line no-empty
          } catch (error) {}
　　　　　　// 這是設(shè)置iframe的scrolling屬性
          _this.type = 'no'
        }
        window.scrollTo(0, 0)
      }
    }

第二種：（這是補充的內(nèi)容，優(yōu)先考慮使用這種）

html代碼：

<div class="header"></div>
<div class="swapper">
    <!-- scrolling必須是auto或者yes,iframe才能滾動，不區(qū)分安卓和蘋果 -->
      <iframe id="iframe1" class="iframeCss" height="100%" width="100%" :src="linkurl" frameborder="0" scrolling="auto"></iframe> 
</div>

css代碼：

.header {
     height: 0.44rem;
    width: 100%;
    background-color: #09b6f2;
    position: fixed;
    z-index: 2000;
    top: 0;
    left: 0;
}
.swapper {
    position: fixed;
    top: 0.44rem;
    left: 0;
    height: 100%;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;
}

沒有JavaScript代碼需要處理；

這樣能保證頭部固定，iframe的內(nèi)容也可以滾動，不用處理不同移動端的情況。

圖片和內(nèi)容參考地址：https://www.cnblogs.com/wuzhiquan/p/5358731.html