iphone使用iframe标签变宽的解决办法

码农公社  210.net.cn   210是何含义?10月24日是程序员节,1024 = 210、210既 210 之意。

办法如下:

使用的是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() {
     // 判断当前移动端是否为IOS系统
        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)
      }
    }

评论