解决部分iphone上使用iframe标签变宽的异常情况

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; //设置iframe宽度,这个也尤其重要
  }

JavaScript代码:

//onload方法在mounted()中执行
  onload() {
    //获取iframe标签
      var iframe = document.getElementById('iframe1')
      let _this = this
      iframe.onload = function() {
     // 判断当前的移动端是否是苹果系统
        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) {}
      // 这是设置iframe的scrolling属性
          _this.type = 'no'
        }
        window.scrollTo(0, 0)
      }
    }

第二种:(这是补充的内容,优先考虑使用这种)

html代码:

<div class="header"></div>
<div class="swapper">
    <!-- scrolling必须是auto或者yes,iframe才能滚动,不区分安卓和苹果 -->
      <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的内容也可以滚动,不用处理不同移动端的情况。

图片和内容参考地址:https://www.cnblogs.com/wuzhiquan/p/5358731.html

(0)

相关推荐