[移动开发]移动端使用iframe嵌套页面 scrolling:auto，ios出现横向滚动条问题

移动端使用iframe嵌套页面 scrolling:auto，ios出现横向滚动条问题

一、业务需求/及问题点

	业务需求:开发移动端项目时,在项目网页内引用第三方网页,为此采用<iframe src=''>标签引入第三方网页

问题一：如何让iframe嵌套页面出现滚动条?

	当使用<iframe src='htttps://xxx.com'> 引入第三方页面，此时页面无法出现上下滚动条，
	解决思路:需要引入iframe标签的scrolling属性：<iframe src='htttps://xxx.com' scrolling="auto">  
	( scrolling属性可取值'yes'、'auto'）既能出现上下滚动条。

解决方法：

<iframe src="https://www.xxxx.com" frameborder="0" scrolling="auto"></iframe>

问题二：scrolling取值auto，ios设备嵌套的页面出现横向滚动条?

	当scrolling="auto"或scrolling="yes"时，ios出现横向滚动条，且引入的页面无法自适应移动端屏幕
大小，在浏览器和安卓设备显示正常，ios设备上却出现横向滚动条且页面无法自使用屏幕大小。
	解决思路: 在ios设备上scrolling取值no，通过html结构加css样式来实现上下滚动条。

解决方法：

<!-- html结构 -->
<div class="external-links">
    <iframe
      src="https://www.xxxx.com"
      frameborder="0"
      scrolling="no"></iframe>
  </div>

// css样式
.external-links{
    display: flex;
    height: 100%;
    flex-direction: column;
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;
    :deep()iframe {
      height: 100%;
      overflow: scroll; 
      -webkit-overflow-scrolling: touch; 
      min-width: 100%; 
      width:1px;
    }
  }

问题三：如何适配Android和IOS设备?

	当scrolling取值no,安卓设备不能上下滚动，且通过设置样式也无法实现上下滚动
	解决思路：前端通过获取用户设备信息进行判断是Android还是IOS, 为scrolling取值。

解决方法:

<!-- 根据机型为scrolling进行取值 -->
<div class="external-links">
    <iframe
      src="https://www.xxxx.com"
      frameborder="0"
      :scrolling="isIOS"></iframe>
  </div>

const isIOS = ref<string>()
onMounted(() => {
      const model = navigator.userAgent
      const isiOS = !!model.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // IOS机型
      const isAndroid = model.indexOf('Android') > -1 || model.indexOf('Adr') > -1 // Android机型
      if (isiOS) {
        isIOS.value = 'no' // ios iframe标签scrolling取值auto会出现横向滚动条，取值no手动添加css样式出现滚动条
      }
      if (isAndroid) {
        isIOS.value = 'auto' // Android iframe标签scrolling取值no不可以上下滚动，取值auto实现上下滚动条
      }
    })

两年的前端菜鸟, 如有理解不对的地方还恳请各位大佬给予指正, 谢谢!!!