解决iframe内嵌移动端页面出现样式错乱问题

出现移动端页面样式错乱的原因：手动给iframe标签设置高度造成的

解决思路：在iframe页面完成DOM渲染再给iframe设置高度

标签格式：

    <iframe id="iframe" name="iframe" src="https://www.baidu.com/" frameborder="0" width="100%" scrolling="auto”）"></iframe>

具体实现：

  mounted() {
    // 页面初始化调用函数
    this.iframeLoad()
  },
  methods: {
    iframeLoad() {
      // 在iframe渲染之前将高度设置0
      document.querySelector('#iframe').style.height = 0
      const iframe = document.querySelector('#iframe')
      // 监听iframe渲染dom的节点
      iframe.onload = function () {
        // 在内嵌页面渲染完成后，通过定时器再设置页面高度，注意：定时器必须加，毫秒单位不能为0
        setTimeout(() => {
          iframe.style.height = '800px'
        }, 500)
      }
    }
  }