admin 管理员组

文章数量: 1184232

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

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

标签格式：

    <iframe id="iframe" name="iframe" src="https://www.baidu/" 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)
      }
    }
  }

本文标签： 内嵌 样式 页面 iframe

版权声明：本文标题：解决iframe内嵌移动端页面出现样式错乱问题 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1766204299a3444341.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。